SASS：在编译时设置变量答案

【问题标题】：SASS: Set variable at compile timeSASS：在编译时设置变量
【发布时间】：2011-08-01 03:17:30
【问题描述】：

是否可以在编译时设置 sass 变量？我基本上想这样做：


$color: red !default;
div#head {

  background-color: $color;

}

当我编译为 css 时，我想将 $color 设置为“蓝色”（最好从命令行）。有没有人能够做到这一点？

谢谢，克里斯

【问题讨论】：

我不太确定我理解你的问题，你想在命令行中设置这个变量吗？有点像sass --style compressed --watch scss:css --vars $color=blue;<- this line won't work, I just made it up to illustrate my question
是的，这正是我想做的！
在那种情况下，我认为现在不可能。抱歉，我无法提供更多帮助。我能想象你唯一能做的就是创建一个自定义 bash/ruby 脚本，将变量添加到文件中，然后将一堆 scss 文件编译为 css。
我有一个类似的问题并想出了自己的解决方案：Command-line argument as var in Sass, for hardcoded CDN URL's on compile

【解决方案1】：

我在他们的常见问题解答http://sass-lang.com/docs/yardoc/file.FAQ.html 中找到了这个

如果您只想在每次编译 CSS 时将一些变量传递给 CSS，例如使用 --watch，您可以使用 Sass functions 定义 Ruby 脚本，甚至查询数据库。但是代码只会被编译一次，并且是静态服务的。

但是如果你需要在每次请求时使用不同的选项重新编译它，

您可以使用Sass::Engine 来呈现代码，使用:custom option 从您的 Sass 函数中传递 can be accessed 的数据

不过好像不推荐。可能是出于性能原因。

【讨论】：

【解决方案2】：

命令行选项的替代方法是创建其他文件，为变量赋值。

假设您上面的代码位于名为“style.scss”的文件中。要将 $color 设置为“蓝色”，请创建一个文件，例如：

$color: blue;
@import "style";

例如，将其命名为“blue.scss”。然后用下面的代码编译它。

sass blue.scss:style.css

当您想为变量分配另一个值时，请创建另一个名为“green.scss”的文件，如：

$color: green;
@import "style";

然后用它编译

sass green.scss:anotherstyle.css

这有点麻烦，但可以在编译时决定变量的值。

【讨论】：

真的认为这不会奏效。我的示例出于演示目的很简单，但我想设置多个变量。
当然你可以在一个导入文件中放入多个变量。您的意思是您需要生成具有大量值组合的单个文件，例如 {var1:val1A, var2:val2A, ...} 到 fileA.css，{var1:val1B, var2:val2B, ...} 到 fileB。 css, 文件C.css 文件D.css ...？如果是这样，太糟糕了，我的回答无济于事。但是，当您想要生成与一个 scss 文件几乎没有差异的 css 文件时，它仍然很有用。例如。大多数 CSS 样式是共享的，需要进行一些调整以使样式适应 PC/平板电脑/智能手机等设备的变化。定义一组变量只需要 3 个文件。
或者，如果您想尝试许多临时值，编辑导入文件并使用 --watch 选项运行 sass 会有所帮助。