动态Sass变量

Question

我是否可以根据HTML元素上的类设置颜色变量？或者有其他方法来实现同样的目标吗？

html {

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

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

}

- colmtuite

---

你可以使用LESS，它可以设置为在客户端编译，并以类似的方式工作。但是这可能会对性能产生影响。http://lesscss.org/ - Mat Richardson

@colmtuite 你是如何解决这个问题的？我也遇到了同样的问题。 - Vipin Raunchhela

Answer 1

这是基本的主题化。您可以使用mixin或include在单个CSS文件中进行多个主题。以下是使用include的方法：

_theme.scss

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

主要.scss

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

    @import "theme";
  }

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

    @import "theme";
 }
}

你可以很容易地创建一个 mixin，它接受 3 种颜色作为参数，并在 include 的位置使用它：

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

- cimmanon

Answer 2

不幸的是，Sass/Scss文件需要被编译成Css文件才能在你的浏览器中得到支持。

由于Css文件不支持变量，因此你只能在Scss模板中设置变量值，因为Sass编译器将使用给定值替换变量（在每个位置上使用变量）。

这意味着，根据在Html文件中包含了哪些类来改变变量的颜色并没有帮助，因为Css文件中不包含任何变量。

你唯一能够做到这件事的方法是：

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

- T.Lange

---

是的，问题是我需要它工作。 没有绝对没有办法吗？ 即使使用JS？ - colmtuite

哦，对不起。我忘了。当然，你可以只使用JavaScript来完成这样的工作，但是无论你使用Scss还是普通CSS都没有关系。等一下，我会给你发布如何使用JS完成它的方法。 :) - T.Lange

没关系，只需使用“Less”即可。它似乎更容易。 :) - T.Lange

如果您有时间的话，我想我更喜欢JS选项。我的整个项目都使用Sass，不想用Less。 - colmtuite

好的，让我看看我能做什么。 - T.Lange

Answer 3

如果您想使用JavaScript，您可以这样做：

您需要一个带有ID和类的HTML元素（决定要使用哪种颜色的元素）。

<exampleTagg id="Target" class="Sunrise">...</exampleTagg>

接下来，您需要添加一些JavaScript。

var CurrentColor = document.getElementById("Target").className; 

if (CurrentColor == "sunrise") {
  document.exampleTagg.style.exampleProperty = "#37CCBD";
}
else if (CurrentColor == "moonlight") {
  document.exampleTagg.style.exampleProperty = "#18c";
}

（第一行将声明一个变量，其中包含我们的exampleTagg元素的值（带有“Target” id），然后if语句将查找我们类的名称（sunrise或moonlight），最后，我们将更改我们的exampleTagg的背景色为我们喜欢的颜色）

要将此示例用于您自己的目的，请将exampleTagg替换为某个真实的标签，并将exampleProperty更改为有效的Css属性。

请注意，您不需要Scss来完成此工作（您仍可以使用它），因为JavaScript将访问您编译的Css文件。

- T.Lange

---

哎呀，"..." 应该被替换为 <exampleTagg id="Target" class="sunrise">...</exampleTagg>。 - T.Lange

我误解了。我以为可以使用JS来更改Sass变量。这些变量将在我的应用程序中出现数百次。逐个编辑它们是不可行的。我需要一种访问Sass变量并编辑它们的方法。这完全不可能吗？ - colmtuite

哦，如果你要使用这个Lesscss东西，你应该接受其他答案，因为它提供了“最好”的答案。但是感谢你接受我的答案。 :)（我只是觉得这样做不公平） - T.Lange