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

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

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

インクルードの使用

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

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

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

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

    @import "theme";
  }

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

    @import "theme";
 }
}

ミックスインの使用

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

@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}

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

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

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