首頁 > web前端 > css教學 > 主體

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

Mary-Kate Olsen
發布: 2024-10-30 16:58:25
原創
422 人瀏覽過

How to Dynamically Style HTML Elements with Sass Variables: Includes vs Mixins?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板