CSS 変数は Sass の `darken()` 関数を模倣してカラーシェードを生成できますか?

CSS 変数を使用したカラー シェードの生成: 体系的な方法

質問

CSS 変数を使用して Sass の darken() 関数の機能を模倣できますか?定義された色の色合いを生成しますか?

相対色を使用したアプローチ構文

CSS では「相対カラー構文」が導入され、次のことが可能になります。

:root {
  --color-primary: #f00;
  --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));
}

その仕組みは次のとおりです。

• --color-primary: 定義ベースカラー。
• --color-primary-darker: ベースカラーを暗くします。 5% using hsl().
• --color-primary-darkest: hsl() を使用してベースカラーを 10% 暗くします。

使用法

使用これらの変数をスタイル要素に使用します:

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

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

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

このアプローチにより、色の濃淡を定義できます。カラー変数を変更せずに動的に、3 つの色合いで目的のグラデーション効果を実現します。

以上がCSS 変数は Sass の `darken()` 関数を模倣してカラーシェードを生成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。