使用Sass 變數動態設定HTML 元素樣式
場景：
您想要指派動態
解：
Sass 提供了兩種方法來實現此目的：
1.使用Includes
使用以下程式碼建立一個單獨的「_theme.scss」檔案：
<code class="scss">section.accent {
background: $accent;
}
.foo {
border: $base;
}
.bar {
color: $flat;
}</code>在主Sass 檔案中，匯入「_theme.scss」檔案「&」選擇器區塊：
<code class="scss">html {
&.sunrise {
$accent: #37CCBD;
$base: #3E4653;
$flat: #eceef1;
@import "theme";
}
&.moonlight {
$accent: #18c;
$base: #2a2a2a;
$flat: #f0f0f0;
@import "theme";
}
}</code>2.使用Mixins
定義一個mixin “_theme”，它接受三個顏色參數：
<code class="scss">@mixin theme($accent, $base, $flat) {
// Sass code to style the elements
}</code>然後，將mixin套用於「&」區塊中的不同類別選擇器：
<code class="scss">html {
&.sunrise {
@include theme(#37CCBD, #3E4653, #eceef1);
}
&.moonlight {
@include theme(#18c, #2a2a2a, #f0f0f0);
}
}</code>這兩種方法都允許您根據元素擁有的類別動態更改元素的顏色。
以上是如何使用 Sass 變數動態設定 HTML 元素樣式：包含與混入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
