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

【问题标题】：Set scss variable's value at runtime or startup在运行时或启动时设置 scss 变量的值
【发布时间】：2014-12-09 07:58:54
【问题描述】：

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

我想在运行时更改它们的值或在启动时将其他值传递给它们。有办法吗？

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

【问题讨论】：

【解决方案1】：

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

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

例如，假设您想根据之前的兄弟姐妹的数量来更改 div 的宽度。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这正是 OP 询问如何 avoid 做的事情......这个答案没有建设性。此外，您评论的第一部分不准确，因为 sass 不是按请求运行，而是在构建期间运行。所以不，它不会影响加载时间。