CSS 変数のみを使用して CSS カラー シェードを生成するにはどうすればよいですか?

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

Web 開発の領域では、一貫したカラー スキームで要素をスタイリングすることが重要です。 CSS 変数は、色を定義し、コード全体で再利用するための便利な方法を提供します。一般的な要件の 1 つは、フォーカス状態やアクティブ状態など、さまざまな状態に対して基本色のバリエーションを作成できることです。

次のシナリオを考えてみましょう。「--color-primary」という名前の CSS 変数を # として定義しました。 f00。 Sass の "darken()" 関数に似たこの色の色合いを作成するには、次のアプローチを利用できます:

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

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

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

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

このコード内:

• 変数 " --color-primary" はベースカラーを定義します。
• 変数 "--color-primary-darker" と"--color-primary-darkest" は、"hsl()" 関数を使用して、ベース カラーの明度 (l) をそれぞれ 5% と 10% 調整してシェードを生成します。
• 「.button」 " 要素は、これらの変数を使用して、その状態に基づいて適切な色合いを割り当てます。

このアプローチは、CSS 変数を使用して色の色合いを動的に変更するための洗練されたソリューションを提供します。これにより、複雑な Sass 関数の必要性がなくなり、Web 要素のより効率的なスタイル設定が可能になります。

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