SASS:在编译时设置变量

发布于 2024-10-31 12:23:13 字数 203 浏览 0 评论 0原文

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


$color: red !default;
div#head {

  background-color: $color;

}

当我编译为 css 时,我想将 $color 设置为“blue”(最好从命令行)。有人能够做到这一点吗?

谢谢, 克里斯

Is it possible to set a sass variable at compile time? I basically want to do this:


$color: red !default;
div#head {

  background-color: $color;

}

When I compile to css I want to set $color to "blue" (preferably from the command line). Has anyone been able to do this?

Thanks,
Chris

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

吾家有女初长成 2024-11-07 12:23:13

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

如果您只想在每次编译时向 CSS 传递一些变量(例如使用 --watch),则可以使用 Sass 函数 定义 Ruby 脚本甚至查询数据库。但代码将仅编译一次,并静态提供。

但是如果您需要根据每个请求使用不同的选项重新编译它,

您可以使用 Sass::Engine 来渲染代码,使用 :自定义选项
传入可以访问的数据 来自 Sass 函数

似乎不推荐,不过。可能是出于性能原因。

I found this at their FAQ http://sass-lang.com/docs/yardoc/file.FAQ.html

If you just want to pass some variables to the CSS every time it gets compiled, like using --watch, you can use Sass functions to define Ruby scripts to even query a database. But the code is going to be compiled only once, and served statically.

But if you need to recompile it at every request with different options,

you can use Sass::Engine to render the code, using the :custom option
to pass in data that can be accessed from your Sass functions

Seems like it's not recommended, though. Probably for performance reasons.

飘落散花 2024-11-07 12:23:13

命令行选项的另一种选择是创建其他文件,为变量分配值。

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

$color: blue;
@import "style";

并将其命名为“blue.scss”。
然后用下面的方法编译它。

sass blue.scss:style.css

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

$color: green;
@import "style";

然后用以下命令编译它

sass green.scss:anotherstyle.css

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

An alternate of command line options is to create other files assigning values to variables.

Assume that your code above is in a file named 'style.scss'.
To set $color to "blue", create a file such as:

$color: blue;
@import "style";

and name it to 'blue.scss' for example.
Then compile it with below.

sass blue.scss:style.css

When you want to assign another value to the variable, make another file named "green.scss" like:

$color: green;
@import "style";

Then compile it with

sass green.scss:anotherstyle.css

It is bothering somewhat but enables to decide values of variables at compile time.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文