动态Sass变量

Question

有什么办法可以根据html元素上的类来设置我的颜色变量吗？或者以任何其他方式实现同​​样的目标？

html {

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

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

}

Answer 1

这是基本的主题.您可能想要使用mixin或include来在单个CSS文件中执行多个主题.这就是你如何使用包括:

_theme.scss

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

main.scss

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

    @import "theme";
  }

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

    @import "theme";
 }
}

您可以轻松制作一个以3种颜色作为参数的mixin来代替include:

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

Answer 2

不幸的是，Sass/Scss文件需要编译成Css文件，以便在您的网络浏览器中得到支持。

由于css文件不支持变量，所以只能在scss模板中设置变量值，因为sass编译器会替换var。（在每个位置，都使用了 var.），具有给定的值。

这意味着，根据Html文件中包含的类，它无助于更改变量的颜色，因为Css文件将不包含任何变量。

你可以做这样的事情的唯一方法是：

1. 读取Html文件以找出已使用的类，
2. 比将Scss模板变量更改为正确的颜色值
3. 并将Scss模板编译成Css文件