如何使用javascript设置SASS变量

Question

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

<div class="button-wrapper">
    <button class="continue enabled">Continue</button>
</div>

Answer 1

SCSS等是预处理语言。 它们带来了一些功能（如变量），可以更轻松地开发和维护您的样式。 但是，vanilla 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';