动态Sass变量 [英] Dynamic Sass Variables

问题描述

有什么方法可以设置我的颜色变量取决于什么类是在html元素？或者以任何其他方式实现同​​样的目标？

Is there any way I can set my color variables depending on what class is on the html element? Or any other way to achieve this same goal?

html {

  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;
  }

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

}

推荐答案

这是基本的主题。你可能想要使用一个混合或包括在一个单一的CSS文件中做多个主题。这是您如何使用include：

This is basic theming. You would either want to use a mixin or include to do multiple themes in a single CSS file. This is how you would go about it using includes:

_theme.scss

_theme.scss

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

main.scss

main.scss

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

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

    @import "theme";
 }
}

你可以很容易地做一个mixin，颜色作为其代替include的参数：

You could just as easily make a mixin that takes 3 colors as its arguments to use in place of the include:

@mixin theme($accent, $base, $flat) {
    // .. do stuff ..
}

这篇关于动态Sass变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！