如何使用 Sass 變數動態設定 HTML 元素樣式：包含與混入？

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