如何根據 HTML 元素類別動態設定 Sass 顏色變數？

基於HTML 元素類別配置動態Sass 變數

問題：我可以根據應用於HTML 元素的類別動態設定Sass 顏色變數嗎?

答案：是的，您可以透過使用Sass include 或mixins 來實現這一點。

使用Includes

在單獨的檔案(_theme .scss），使用Sass 變數定義樣式：

<code class="scss">section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}</code>

在主Sass 檔案(main.scss) 中，根據HTML 元素上的類別導入包含：

<code class="scss">html {
  &amp;.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

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

    @import "theme";
 }
}</code>

使用Mixins

或者，您可以建立一個以顏色作為參數的mixin：

<code class="scss">@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}</code>

在主Sass 檔案中，使用適當的顏色呼叫mixin：

<code class="scss">html {
  &amp;.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @include theme($accent, $base, $flat);
  }

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

    @include theme($accent, $base, $flat);
 }
}</code>

這種方法可讓您根據HTML 元素的類別動態地將不同的主題套用到HTML 元素。

以上是如何根據 HTML 元素類別動態設定 Sass 顏色變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！