使用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中文網其他相關文章!