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

时间:2013-03-01 08:37:32

标签: sass

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

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

4 个答案:

答案 0 :(得分:6)

使用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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

例如:

myThreads.emplace_back(th_func, S, index, c); // <-- it should be std::ref(S)
// 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";

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

答案 3 :(得分:-1)

我很确定我明白你在说什么。有时最好将.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...
    }
}

这样你仍然可以拥有组织和条件样式。我希望这有帮助!