HTML 要素クラスに基づいて Sass カラー変数を動的に設定するにはどうすればよいですか?

HTML 要素クラスに基づいた動的 Sass 変数の設定

質問: HTML 要素に適用されたクラスに基づいて Sass カラー変数を動的に設定できますか?

答え: はい、Sass インクルードまたはミックスインを使用してこれを実現できます。

インクルードの使用

別のファイル (_theme) .scss) を使用して、Sass 変数を使用してスタイルを定義します:

<code class="scss">section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

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

メイン Sass ファイル (main.scss) で、HTML 要素のクラスに基づいてインクルードをインポートします:

<code class="scss">html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

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

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

ミックスインの使用

あるいは、色を引数として受け取るミックスインを作成することもできます:

<code class="scss">@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}</code>

メインの Sass ファイルで、適切な色を指定してミックスインを呼び出します:

<code class="scss">html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @include theme($accent, $base, $flat);
  }

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

    @include theme($accent, $base, $flat);
 }
}</code>

このアプローチにより、クラスに基づいて HTML 要素にさまざまなテーマを動的に適用できます。

以上がHTML 要素クラスに基づいて Sass カラー変数を動的に設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。