如何在运行时根据环境变量使用CSS规则

Question

如何根据环境变量使用 css 规则。也就是说，我想在 .scss 中根据环境变量的值（计算结果为 true 或 false）有条件地应用样式。

我找到了这个选项，但它会在构建过程中：

@if $APPLY_STYLES == true { 
   .element .apply-style {
       color: blue; 
   }
}

我有兴趣在运行时执行此操作，我该怎么做？例如，如果我这样做，则规则中类名的顺序很重要，即在本示例中只有一个类，但如果有多个类定义了更高的特异性，会发生什么情况？当你添加类时，它添加到哪里？应该是

.element .apply-style

或

.element.apply-style

<style>
    .element {
        color: black; /* Default case */
    }
    .element .apply-style {
        color: blue; /* If APPLY_STYLES is true */
    }
</style>
<script>
    const applyStyles = this.env.APPLY_STYLES;
    const element = document.querySelector('.element');

    if (applyStyles === 'true') {
        element.classList.add('apply-styles');
    }
</script>

无论如何，我不知道这是否是最好的做法。

Answer 1

根据 Sass 文档：

Sass 变量全部被 Sass 编译掉了

因此，任何 sass 变量都不能保留到您的运行时中。

我提出的建议是使用 Javascript 根据所述值交换类，就像在第二个示例中一样。