如何使用 javascript 设置 SASS 变量

【问题标题】：How to set SASS variable using javascript如何使用 javascript 设置 SASS 变量
【发布时间】：2018-01-01 10:40:06
【问题描述】：

我想使用 sass css 在 css 中设置一个全局变量。该全局变量必须使用 javascript 设置。如何使用 javascript 或任何其他方法设置变量我使用了 root css，但 IE 浏览器不支持它。以下是我的css

$mainbgimage: image url;
.page-title {
padding: 0;
min-height: 200px;
background-image: $mainbgimage;
}

【问题讨论】：

JS无法设置SASS变量
分享您的代码，以便我们告诉您您想要实现的解决方法，因为您所要求的不可能做到。
您可以使用 javascript 动态设置 CSS，但 scss 不能。 SCSS 需要一个转译器将其分解为 CSS。
我刚刚发现了一种解决方法。您可以复制当前的 sass 样式表，然后更改该副本中的变量并在 javascript 中加载不同的样式表。

标签： javascript jquery css sass

【解决方案1】：

SCSS 等是经过预处理的语言。它们带来了特性（如变量），使您更容易开发和维护您的样式。然而，这些功能不受原始 CSS 支持，您需要运行预处理器 (SASS) 来生成浏览器支持的 CSS。

生成的 CSS 没有变量，因此您不能直接使用客户端 javascript 更改它们。

但幸运的是，动态样式有很多选择。我总是建议像这样切换 CSS 类：

document.getElementById('elementId').classList.add('specialStyleClass');

/* ... */

document.getElementById('elementId').classList.remove('specialStyleClass');

您甚至可以直接从 javascript 设置元素样式：

document.getElementById('elementId').style.color = 'red';

【讨论】：