使用Knockout绑定或其他解决方案影响Sass变量

Question

是否可以通过data-bind更改sass变量？

示例：我想用按钮更改变量的颜色。

我对除Knockout.js之外的其他解决方案持开放态度。

$color: red;

my_class {
  background-color: $color;
  
  height:20px
  width:20px;
}

<button type="button" data-bind="css: { $color: 'green'}">Change to Green</button>


<div class="my_class"></div

Answer 1

SASS是一个CSS预处理器，在SASS文件编译过程中，用它的确切值（$color）替换变量（red）的每个出现。

因此，在将SASS编译成CSS后，您无法对此产生影响。

您可以使用样式绑定

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
   Profit Information
</div>

如documentation中所述，以便更改特定元素的颜色。

或者您可以从视图模型中返回此颜色，并在样式绑定中使用它。