加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算。如:
.box { width: 20px + 8in; }
编译出来的 CSS:
.box {
width: 788px;
}
但对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示:
.box {
width: 20px + 1em;
}
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位(比如
em ,px , %),但当一个单位同时声明两个值时会有问题。
如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可。
Sass 的乘法运算和加法、减法运算一样,在运算中有不同类型的单位时,也将会报错
除法:
单独运算时要带括号。
除了上面情况带有小括号,“/”符号会当作除法运算符之外,如果“/”符号在已有的数学表达式中时,也会被认作除法符号。
另外,在 Sass 除法运算中,当用变量进行除法运算时,“/”符号也会自动被识别成除法
综合上述,”/ ”符号被当作除法运算符时有以下几种情况:
• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。
颜色运算
所有算数运算都支持颜色值,并且是分段运算的。也就是说,红、绿和蓝各颜色分段单独进行运算。如:
p {
color: #010203 + #040506;
}
计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09
字符运算
注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧),
结果将是一个没有引号的字符串。
在 Sass 中可以通过加法符号“+”来对字符串进行连接。