在运行时或启动时设置scss变量的值

Question

我有一个.scss文件，其中设置了变量，我可以使用这些变量计算其他值。

我想在运行时更改它们的值，或者在启动时传递其他值。 有办法解决这个问题吗？

例如：在我有$myWidth: 500px的文件中。有时候这个值必须不同， 我想以某种方式设置此值而不创建不同的.scss文件

Answer 1

SASS就是我们所说的 pre 处理器。这意味着在编写sass时没有实时。

您可以做的是为所有可能的用例生成css代码，并启用禁用它（可以通过更改类名或导入不同的css文件）。

例如，假设您要根据前面的兄弟节点数更改div的宽度。

@for $i from 0 through 15 {
  .container div:nth-child($i) {width: #{$i * 50}px;}
}

Answer 2

这意味着您的scss会针对每个请求进行编译，从而减慢您的计算机速度，并增加您的响应发送所需的时间。

如果要在运行时更改内容，可以在需要时包含另一个带有覆盖的scss文件。