javascript - 使用 Knockout 绑定(bind)或其他解决方案影响 Sass 变量

Question

是否可以通过数据绑定(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 后，您就无法影响它。

您可以使用样式绑定(bind)

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

如 documentation 中所述为了改变特定元素的颜色。

或者您可以从 View 模型返回此颜色并在样式绑定(bind)中使用它。