运算
在css 属性的基础上,Sass 提供了一些名为 SassScript 的新功能。SassScript 可作用于任何属性,允许属性使用变量、算数运算等额外功能。
所有数据类型均支持相等运算 ==
或 !=
,此外,每种数据类型也有其各自支持的运算方式。
数据类型 (Data Types)
SassScript 支持 6 种主要的数据类型:
- 数字,
1, 2, 13, 10px
- 字符串,有引号字符串与无引号字符串,
"foo", 'bar', baz
- 颜色,
blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型,
true, false
- 空值,
null
- 数组 (list),用空格或逗号作分隔符,
1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps, 相当于 JavaScript 的 object,
(key1: value1, key2: value2)
SassScript 也支持其他 CSS 属性值,比如 Unicode 字符集,或 !important
声明。然而Sass 不会特殊对待这些属性值,一律视为无引号字符串。
数字运算 (Number Operations)
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %
),如果必要会在不同单位间转换值。
p {
width: 1in + 8pt;
}
编译为
p {
width: 1.111in; }
关系运算 <, >, <=, >=
也可用于数字运算,相等运算 ==, !=
可用于所有数据类型。
除法运算 /
(Division and /
)
/
在 CSS 中通常起到分隔数字的用途,SassScript 作为 CSS 语言的拓展当然也支持这个功能,同时也赋予了 /
除法运算的功能。也就是说,如果 /
在 SassScript 中把两个数字分隔,编译后的 CSS 文件中也是同样的作用。
以下三种情况 /
将被视为除法运算符号:
- 如果值,或值的一部分,是变量或者函数的返回值
- 如果值被圆括号包裹
- 如果值是算数表达式的一部分
p {
font: 10px/8px; // 纯css,无除法运算
$width: 1000px;
width: $width/2; // 使用变量,做除法运算
width: round(1.5)/2; // 使用函数,做除法运算
height: (500px/2); // 使用括号,做除法运算
margin-left: 5px + 8px/2px; // 使用加法,做除法运算
}
编译为
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
如果需要使用变量,同时又要确保 /
不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{}
插值语句将变量包裹。
//scss
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
//css
p {
font: 12px/30px;
}
颜色值运算 (Color Operations)
颜色值的运算是分段计算进行的,也就是分别计算红色,绿色,以及蓝色的值:
p {
color: #010203 + #040506;
}
计算 01 + 04 = 05
02 + 05 = 07
03 + 06 = 09
,然后编译为
p {
color: #050709; }
使用 color functions 比计算颜色值更方便一些。
数字与颜色值之间也可以进行算数运算,同样也是分段计算的,比如
p {
color: #010203 * 2;
}
计算 01 * 2 = 02
02 * 2 = 04
03 * 2 = 06
,然后编译为
p {
color: #020406; }
需要注意的是,如果颜色值包含 alpha channel(rgba 或 hsla 两种颜色值),必须拥有相等的 alpha 值才能进行运算,因为算术运算不会作用于 alpha 值。
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
编译为
p {
color: rgba(255, 255, 0, 0.75); }
颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。
$translucent-red: rgba(255, 0, 0, 0.5);
p {
color: opacify($translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}
编译为
p {
color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.25); }
IE 滤镜要求所有的颜色值包含 alpha 层,而且格式必须固定 #AABBCCDD
,使用 ie_hex_str
函数可以很容易地将颜色转化为 IE 滤镜要求的格式。
$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}
编译为
div {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}
字符串运算 (String Operations)
+
可用于连接字符串
p {
cursor: e + -resize;
}
编译为
p {
cursor: e-resize; }
注意,如果有引号字符串(位于 +
左侧)连接无引号字符串,运算结果是有引号的,相反,无引号字符串(位于 +
左侧)连接有引号字符串,运算结果则没有引号。
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
编译为
p:before {
content: "Foo Bar";
font-family: sans-serif; }
运算表达式与其他值连用时,用空格做连接符:
p {
margin: 3px + 4px auto;
}
编译为
p {
margin: 7px auto; }
在有引号的文本字符串中使用 #{}
插值语句可以添加动态的值:
p:before {
content: "I ate #{5 + 10} pies!";
}
编译为
p:before {
content: "I ate 15 pies!"; }
空的值被视作插入了空字符串:
$value: null;
p:before {
content: "I ate #{$value} pies!";
}
编译为
p:before {
content: "I ate pies!"; }
布尔运算 (Boolean Operations)
SassScript 支持布尔型的 and
or
以及 not
运算。
数组运算 (List Operations)
数组不支持任何运算方式,只能使用 list functions 控制。
圆括号 (Parentheses)
圆括号可以用来影响运算的顺序:
p {
width: 1em + (2em * 3);
}
编译为
p {
width: 7em; }
关键词参数 (Keyword Arguments)
Sass 函数允许使用关键词参数 (keyword arguments),上面的例子也可以写成:
p {
color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
虽然不够简明,但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口,以及容易调用的参数。关键词参数可以打乱顺序使用,如果使用默认值也可以省缺,另外,参数名被视为变量名,下划线、短横线可以互换使用。
通过 Sass::Script::Functions 查看完整的 Sass 函数列表,参数名,以及如何自定义函数。
插值语句 #{}
(Interpolation: #{}
)
通过 #{}
插值语句可以在选择器或属性名中使用变量:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
编译为
p.foo {
border-color: blue; }
#{}
插值语句也可以在属性值中插入 SassScript,大多数情况下,这样可能还不如使用变量方便,但是使用 #{}
可以避免 Sass 运行运算表达式,直接编译 CSS。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译为
p {
font: 12px/30px; }