一运算
1.1数据类型
-
数字。例如:
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)
。
1.2数字运算
SassScript 支持数字的加减乘除、取整等运算(+
、-
、*
、/
、%
)
以下三种情况 /
将被视为除法运算符号:
-
如果值或值的一部分,是变量或者函数的返回值;
-
如果值被圆括号包裹;
-
如果值是算数表达式的一部分。
1.3颜色值运算
颜色值的运算是分段计算进行的,也就是分别计算红色、绿色、蓝色的值
1.4字符串运算
+可用于连接字符串:
// scss
p {
cursor: e + -resize;
}
// css
p {
cursor: e-resize;
}
如果有引号字符串(位于 +
左侧)连接无引号字符串,运算结果是有引号的;相反,无引号字符串(位于 +
左侧)连接有引号字符串,运算结果则没有引号。
// scss
p::before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
// css
p::before {
content: "Foo Bar";
font-family: sans-serif;
}
在有引号的文本字符串中使用 #{}
插值语句可以添加动态的值:
二圆括号
圆括号可以用来影响运算的顺序
三插值语句
通过 #{}
插值语句可以在选择器或属性名中使用变量:
四定制按钮