Sass 変数を使用してテーマ主導の動的な色のカスタマイズを作成する方法-CSSチュートリアル-php.cn

Sass 変数を使用してテーマ主導の動的な色のカスタマイズを作成する方法

Barbara Streisand

リリース： 2024-11-01 09:21:30

オリジナル

795 人が閲覧しました

How to Create Dynamic Theme-Driven Color Customization Using Sass Variables?

テーマ主導のカラーカスタマイズに動的 Sass 変数を活用する

Sass では、HTML に適用されるクラスに基づいてカラー変数を異なる方法で設定できます

条件付き Sass 構文を使用してこれを実現する方法を調べてみましょう:

<code class="scss">html {

  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;
  }
}</code>

ログイン後にコピー

この例では、Sass はカラー変数 $ を設定します。上の日の出クラスまたは月明かりクラスの存在に基づいて、accent、$base、$ flat が動的に追加されます。 element.

もう 1 つの手法には、特定のテーマに基づいて CSS ファイルを動的に変更することが含まれます。 CSS インクルードを使用すると、さまざまなテーマ固有のスタイルをメインスタイルシートにインポートできます。

<code class="scss">_theme.scss:

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}</code>

ログイン後にコピー

<code class="scss">main.scss:

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}</code>

ログイン後にコピー

カラー変数の値を動的に調整することで、さまざまなテーマに適応するカスタマイズされたカラースキームを簡単に作成できます。またはユーザー設定。

以上がSass 変数を使用してテーマ主導の動的な色のカスタマイズを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。