在命令行上提供 sass 变量定义答案

【问题标题】：Provide sass variables definitions on command-line在命令行上提供 sass 变量定义
【发布时间】：2013-02-15 17:03:54
【问题描述】：

是否有一种标准的或简单的方法来在命令行上定义 sass 变量，或者从环境中传递它们？我正在做的是尝试从单个 SCSS 源文件创建不同的 CSS 文件。每个输出文件都将专门用于特定的目标设备，并包含在带有媒体查询的 HTML 页面中。

更新：看起来这可能还不够。 @if 语法实际上不允许有条件的 sass 块，只允许有条件的 CSS 块。这意味着即使我可以定义一个变量，它也不允许我在文件中进行不同的处理。有什么想法吗？

【问题讨论】：

拥有多个 SCSS 文件有什么问题？如果您为每个目标设备制作一个 CSS 文件，那么无论如何您都必须拥有多个 CSS 文件。您的修改毫无意义。
相关：github.com/sass/sass/issues/1692

标签： sass

【解决方案1】：

使用SASS custom functions。下面是一个完整的工作示例。

styles.sass：

$primary_color: getenv("SASS_VAR_PRIMARY_COLOR", white)

body
    background: $primary_color

sass_functions.rb:

module Sass::Script::Functions
    def getenv(name, default)
        assert_type name, :String
        value = ENV.fetch(name.value, nil)
        if not value
            return default
        end
        begin
            Sass::Script::Parser.parse(value, 0, 0)
        rescue
            Sass::Script::String.new(value)
        end
    end
end

命令行：

SASS_VAR_PRIMARY_COLOR='#123456' sass -r ./sass_functions.rb styles.sass styles.css

如果你使用 Compass，你可以将 module Sass::Script::Functions 直接放入 config.rb 并编译样式：

SASS_VAR_PRIMARY_COLOR='#123456' sass --compass styles.sass styles.css

【讨论】：

【解决方案2】：

我需要的设施根本不在 SASS 中。即使您可以在命令行上定义变量，“if”工具也不足以在样式表中实际执行条件块。

相反，我使用了旧的备用 M4。我只是用 M4 预处理 SASS，执行命令行选项和完整的条件块。

【讨论】：

【解决方案3】：

我找不到从命令行指定 sass 变量的方法，但您可以通过创建多个导入基本 SCSS 文件的专用 SCSS 文件来模仿这种行为。

例如：

// base_style.scss
@debug "* Format = #{$format} *";
@if $format == 1
{
  $body-font-family: "Palatino" !global;
}
@else if $format == 2
{
  $body-font-family: "Arial" !global;
}
@else
{
  @warn "Undefined format";
}
body
{
  font-family: $body-font-family;
}

// style_1.scss
$format: 1;
@import "base_style.scss";

// style_2.scss
$format: 2;
@import "base_style.scss";

然后从命令行：

sass style_1.scss style_1.css
sass style_2.scss style_2.css

请注意，您还可以在一个 (S)CSS 文件中为不同的目标媒体指定规则，其中包含不同的媒体查询。在这种情况下，您只需要一个源文件。

【讨论】：

【解决方案4】：

我很确定我明白你在说什么。有时最好将内容组合在一个 .scss 文件中，最终形成条件样式表，这样您就可以更轻松地找到它们。

目前还没有能力将 sass 样式表编译到单独的样式表中，而无需将所有条件规则分组到一个部分中。

但是，使用 Paul Irish 的建议有条件地在 html 标签中添加一个类名：http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

你可以这样做：

.something {
    regular rules...

    .ie8 & {
         conditional rules...
    }
}

这样您仍然可以拥有组织和条件样式。我希望这会有所帮助！

【讨论】：