変数と相対カラー構文を使用して CSS カラー シェードを作成するにはどうすればよいですか?

変数を使用した CSS カラーシェードの作成

CSS 変数内で Sass の darken() 関数の機能を実現することは、新しい相対カラー構文を通じて可能です.

原色の変数を定義します(--color-primary) 任意の形式を使用します。各シェードについて、hsl() 関数と calc() を使用して、原色の明度 (l) コンポーネントを調整します。たとえば、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));

要素の背景に --color-primary を割り当てます。次に、--color-primary-darker と --color-primary-darkest をホバー、フォーカス、およびアクティブ状態に適用します。

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

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

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

このアプローチにより、色の濃淡を定義する際の柔軟性が提供され、プロセスが簡素化されます。 CSS 変数システム内で一貫した配色を作成します。

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