CSS 変数のみを使用して Sass の `darken()` 関数のような CSS カラー シェードを作成するにはどうすればよいですか?

CSS 変数を使用したカラー シェードの作成: Sass の Darken() 関数のシミュレーション

問題ステートメント:

動的なカラー シェードの作成以下と同様の方法で CSS 変数を使用して、ホバー、フォーカス、アクティブ状態を設定します。 Sass の darken() 関数。

解決策:

CSS カラー モジュール レベル 4 仕様では、算術演算を使用して色の操作を可能にする「相対カラー構文」が導入されています。これにより、次のように色合いを作成できます:

:root {
  --color-primary: #f00; /* any format you want here */
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

.button {
  background: var(--color-primary);
}

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

このコードでは:

• var(--color-primary) は元の色です。
• --color-primary-darker は、より 5% 暗くなります。 --color-primary.
• --color-primary-darkest は、--color-primary.

より 10% 暗くなります。calc() 式のパーセンテージを調整すると、基本色のさまざまな色合いを生成できます。このアプローチは、Sass の darken() 関数と同様の機能を提供しますが、純粋に CSS 構文を使用します。

以上がCSS 変数のみを使用して Sass の `darken()` 関数のような CSS カラー シェードを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。