在命令行上提供sass变量定义
是否有一种标准或简单的方法可以在命令行上定义sass变量,或从环境中传递它们?我正在做的是尝试从单个SCSS源文件创建不同的CSS文件。每个输出文件都将专门用于特定的目标设备,并包含在带有媒体查询的HTML页面中在命令行上提供sass变量定义,sass,Sass,是否有一种标准或简单的方法可以在命令行上定义sass变量,或从环境中传递它们?我正在做的是尝试从单个SCSS源文件创建不同的CSS文件。每个输出文件都将专门用于特定的目标设备,并包含在带有媒体查询的HTML页面中 更新:看起来这还不够。@if语法实际上不允许条件sass块,只允许条件CSS块。这意味着即使我可以定义一个变量,它也不允许我在文件中进行不同的处理。有什么想法吗?我很确定我理解你的意思。有时,最好将内容组合在一个.scss文件中,该文件最终会生成条件样式表,这样您就可以更容易地找到它们
更新:看起来这还不够。
@if
语法实际上不允许条件sass块,只允许条件CSS块。这意味着即使我可以定义一个变量,它也不允许我在文件中进行不同的处理。有什么想法吗?我很确定我理解你的意思。有时,最好将内容组合在一个.scss文件中,该文件最终会生成条件样式表,这样您就可以更容易地找到它们
目前,仍然无法在不将所有条件规则分组为部分规则的情况下将sass样式表编译成单独的样式表
但是,使用Paul Irish的建议,有条件地将类名添加到html标记中:
这样,您仍然可以拥有组织和条件样式。我希望这有帮助 我需要的设备根本不在SASS中。即使可以在命令行上定义变量,“if”功能也不足以在样式表中实际执行条件块 相反,我求助于旧的备用M4。我只需使用M4预处理SAS,执行命令行选项和完整条件块。使用。下面是一个完整的工作示例 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,您可以将模块Sass::Script::Functions
直接放入config.rb中,并使用以下内容编译样式:
SASS_VAR_PRIMARY_COLOR='#123456' sass --compass styles.sass styles.css
我找不到从命令行指定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;
}
然后从命令行:
SASS_VAR_PRIMARY_COLOR='#123456' sass -r ./sass_functions.rb styles.sass styles.css
sass style_1.scss style_1.css
sass style_2.scss style_2.css
请注意,您还可以在一个CSS文件中指定不同目标媒体的规则,其中包含不同的媒体查询。在这种情况下,您只需要一个源文件。有多个SCSS文件有什么问题?如果要为每个目标设备创建一个CSS文件,那么无论如何都必须有多个CSS文件。你的编辑毫无意义。相关:
// 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";