SassScript
在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性,允许属性使用变量、算数运算等额外功能。
变量 $
(Variables: $
)
SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样:
$width: 5em;
直接使用即调用变量:
#main {
width: $width;
}
数据类型 (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 不会特殊对待这些属性值,一律视为无引号字符串。
字符串 (Strings)
SassScript 支持 CSS 的两种字符串类型:有引号字符串 (quoted strings),如 "Lucida Grande"
'http://sass-lang.com'
;与无引号字符串 (unquoted strings),如 sans-serif
bold
,在编译 CSS 文件时不会改变其类型。只有一种情况例外,使用 #{}
(interpolation) 时,有引号字符串将被编译为无引号字符串,这样便于在 mixin 中引用选择器名:
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
编译为
body.firefox .header:before {
content: "Hi, Firefox users!"; }
数组 (Lists)
数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0
或者 font-face: Helvetica, Arial, sans-serif
这样通过空格或者逗号分隔的一系列的值。事实上,独立的值也被视为数组 —— 只包含一个值的数组。
数组本身没有太多功能,但 Sass list functions 赋予了数组更多新功能:nth
函数可以直接访问数组中的某一项;join
函数可以将多个数组连接在一起;append
函数可以在数组中添加新值;而 @each
指令能够遍历数组中的每一项。
运算 (Operations)
所有数据类型均支持相等运算 ==
或 !=
,此外,每种数据类型也有其各自支持的运算方式。
数字运算 (Number Operations)
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %
),如果必要会在不同单位间转换值。
p {
width: 1in + 8pt;
}
编译为
p {
width: 1.111in; }
关系运算 <, >, <=, >=
也可用于数字运算,相等运算 ==, !=
可用于所有数据类型。
除法运算 /
(Division and /
)
/
在 CSS 中通常起到分隔数字的用途,SassScript 作为 CSS 语言的拓展当然也支持这个功能,同时也赋予了 /
除法运算的功能。也就是说,如果 /
在 SassScript 中把两个数字分隔,编译后的 CSS 文件中也是同样的作用。
以下三种情况 /
将被视为除法运算符号:
- 如果值,或值的一部分,是变量或者函数的返回值
- 如果值被圆括号包裹
- 如果值是算数表达式的一部分
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
}
编译为
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px; }
如果需要使用变量,同时又要确保 /
不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{}
插值语句将变量包裹。
字符串运算 (String Operations)
+
可用于连接字符串
p {
cursor: e + -resize;
}
编译为
p {
cursor: e-resize; }
布尔运算 (Boolean Operations)
SassScript 支持布尔型的 and
or
以及 not
运算。
数组运算 (List Operations)
数组不支持任何运算方式,只能使用 list functions 控制。
圆括号 (Parentheses)
圆括号可以用来影响运算的顺序:
p {
width: 1em + (2em * 3);
}
编译为
p {
width: 7em; }
函数 (Functions)
SassScript 定义了多种函数,有些甚至可以通过普通的 CSS 语句调用:
p {
color: hsl(0, 100%, 50%);
}
编译为
p {
color: #ff0000; }
插值语句 #{}
(Interpolation: #{}
)
通过 #{}
插值语句可以在选择器或属性名中使用变量:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
编译为
p.foo {
border-color: blue; }
#{}
插值语句也可以在属性值中插入 SassScript,大多数情况下,这样可能还不如使用变量方便,但是使用 #{}
可以避免 Sass 运行运算表达式,直接编译 CSS。