css - 動的 Sass 変数

Question

HTML要素のクラスに応じて色変数を設定する方法はありますか? または、これと同じ目標を達成するための他の方法はありますか?

html {

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

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

}

Answer 1

これは基本的なテーマです。1 つの CSS ファイルで複数のテーマを実行するには、ミックスインを使用するか、インクルードする必要があります。これは、includes を使用してそれを行う方法です。

_theme.scss

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

main.scss

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

    @import "theme";
  }

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

    @import "theme";
 }
}

インクルードの代わりに引数として 3 つの色を使用する mixin を簡単に作成できます。

@mixin theme($accent, $base, $flat) {
    // .. do stuff ..
}

Answer 2

残念ながら、Web ブラウザでサポートするには、 Sass/ScssファイルをCssファイルにコンパイルする必要があります。

Cssファイルは変数をサポートしていないため、Sassコンパイラーがvar . (すべての位置で var. が使用されています)、指定された値で。

つまり、 Cssファイルには変数が含まれないため、 Htmlファイルに含まれるクラスに応じて変数の色を変更しても意味がありません。

そのようなことを行う唯一の方法は、次のとおりです。

1. Htmlファイルを読み取って、どのクラスが使用されているかを調べます。
2. Scssテンプレート変数を正しい色の値に変更するよりも
3. ScssテンプレートをCssファイルにコンパイルする

Answer 3

JavaScriptを使用したい場合は、次のように実行できます。

IDとクラス（使用する色を決定するもの）を持つHTML要素が必要になります。

<exampleTagg id="Target" class="Sunrise">...</exampleTagg>

次に、JavaSriptを追加する必要があります

var CurrentColor = document.getElementById("Target").className; 

if (CurrentColor == "sunrise") {
  document.exampleTagg.style.exampleProperty = "#37CCBD";
}
else if (CurrentColor == "moonlight") {
  document.exampleTagg.style.exampleProperty = "#18c";
}

（最初の行はexampleTagg要素（ "Target" idを持つもの）の値を含む変数を宣言し、次にifステートメントはクラスの名前（日の出または月光）を見つけ、最後にexampleTaggの背景を好きな色に変更します）

この例を独自の目的で使用するには、exampleTaggを実際のtaggに置き換え、examplePropertyを有効なCssプロパティに変更します。

JavaScriptはコンパイルされたCssファイルにアクセスするため、このジョブにはScssは必要ありません（uは引き続き使用できます）。