动态 Sass 变量答案

【问题标题】：Dynamic Sass Variables动态 Sass 变量
【发布时间】：2013-01-11 05:31:46
【问题描述】：

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

html {

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

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

}

【问题讨论】：

您可以使用 LESS，它可以设置为编译客户端并以类似的方式工作。但是，这可能会对性能产生影响。 lesscss.org
@colmtuite 你做了什么来解决这个问题？我遇到了同样的问题。

标签： css sass

【解决方案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 ..
}

【讨论】：

【解决方案2】：

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

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

这意味着，根据 Html 文件中包含的类，更改变量的颜色无济于事，因为 Css 文件不会' t 包含任何变量。

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

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

【讨论】：

是的，问题是，我需要这个来工作。绝对没有办法吗？即使是 JS？
哦，对不起。我忘了。当然，你可以只使用 JavaScript 来完成这样的工作，但是你使用 Scss 还是常规 CSS 都没有关系。等等，我将向您发布如何使用 JS 进行操作。 :)
没关系，用“更少”的东西。这似乎更容易。 :)
如果你有时间，我想我更喜欢 JS 选项？我的整个项目都使用 Sass，不太想进入 Less。
当然，让我们看看，我能做什么

【解决方案3】：

如果你喜欢使用 JavaScript，你可以这样做：

您将需要一个带有 Id 和 Class 的 HTML 元素（决定使用什么颜色的元素）。

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

接下来，您需要添加一些 JavaSript

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

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

（第一行将声明一个变量，其中包含我们的 exampleTagg 元素的值（具有“目标”id 的那个），然后 if 语句将找出我们的类的名称（日出或月光），最后，我们将 exampleTagg 的背景更改为我们喜欢的颜色）

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

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

【讨论】：

Ups，"..." 应该替换为 ...
我误会了。我以为我可以使用 JS 来更改 Sass 变量。这些变量将出现在我的应用程序的数百个地方。单独编辑它们是不可行的。我需要一些方法来访问 Sass 变量并对其进行编辑。无论如何，这完全不可能吗？
哦，如果你要使用这个 Lesscss 东西，你实际上应该接受另一个答案，因为它提供了问题的“最佳”答案。但感谢您接受我的回答。 :)（我只是认为这不公平）