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

【问题标题】：Affecting Sass variable with a Knockout bind or other solution使用 Knockout 绑定或其他解决方案影响 Sass 变量
【发布时间】：2018-02-07 00:13:31
【问题描述】：

是否可以通过数据绑定更改 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

【问题讨论】：

【解决方案1】：

SASS 是一个 CSS 预处理器，在 SASS 文件编译期间，将变量 ($color) 的每一次出现替换为其确切值 (red)。

因此，在 SASS 编译成 CSS 后，您将无法影响这一点。

您可以使用样式绑定

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

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

或者你可以从你的视图模型中返回这个颜色并在样式绑定中使用它。

【讨论】：