Sass 変数を使用して HTML 要素を動的にスタイル設定する
シナリオ:
動的を割り当てたいと考えています
解決策:
Sass は、これを実現する 2 つのメソッドを提供します。
1.インクルードの使用
次のコードで別の "_theme.scss" ファイルを作成します。
<code class="scss">section.accent { background: $accent; } .foo { border: $base; } .bar { color: $flat; }</code>
メインの Sass ファイルで、 「&」セレクター ブロック:
<code class="scss">html { &.sunrise { $accent: #37CCBD; $base: #3E4653; $flat: #eceef1; @import "theme"; } &.moonlight { $accent: #18c; $base: #2a2a2a; $flat: #f0f0f0; @import "theme"; } }</code>
2.ミックスインの使用
3 つの色の引数を取るミックスイン "_theme" を定義します:
<code class="scss">@mixin theme($accent, $base, $flat) { // Sass code to style the elements }</code>
次に、ミックスインを "&" ブロック内の異なるクラス セレクターに適用します:
<code class="scss">html { &.sunrise { @include theme(#37CCBD, #3E4653, #eceef1); } &.moonlight { @include theme(#18c, #2a2a2a, #f0f0f0); } }</code>
どちらのメソッドでも、要素が所有するクラスに基づいて要素の色を動的に変更できます。
以上がSass 変数を使用して HTML 要素を動的にスタイル設定する方法: インクルードとミックスイン?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。