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

CSS 変数を使用して色合いを作成する (Sass の darken() 関数と同様)

CSS では、原色の変数を定義できますホバー、フォーカス、アクティブ状態のシェードを自動的に生成します。方法は次のとおりです:

原色変数の定義:

:root {
  --color-primary: #f00;
}

相対色構文を使用して原色を暗くする:

CSS 仕様では「相対カラー構文」が導入されています。方程式を使用して色を操作します。原色を 5% 暗くするには:

--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));

同様に、原色を 10% 暗くするには:

--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);
}

原色を変数として定義することで、簡単に変更できるようになりましたそして、さまざまな状態のシェードを自動的に生成します。このアプローチは、個別のカラー クラスを使用する場合と比較して、より保守しやすく効率的にカラー バリエーションを作成する方法を提供します。

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