如何使用JavaScript设置SASS变量

Question

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

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

Answer 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';