Sass入门:第四章
1.加法
加法运算是Sass中运算的一种,在变量或属性中都可以做加法运算。如:
.box {
width: 20px + 8in;
}
编译出来的CSS:
.box {
width: 788px;
}
但对于携带不同类型的单位时,在Sass中计算会报错。如下所示:
.box {
width: 20px + 1em;
}
编译的时候,编译器会报错:"Incompatible units: 'em' and ‘px'."
2.减法
Sass的减法运算和加法运算类似,我们通过一个简单的示例来做阐述:
$full-width: 960px;
$sidebar-width: 200px;
.content {
width: $full-width - $sidebar-width;
}
编译出来的CSS如下:
.content {
width: 760px;
}
同样的,运算时碰到不同类型的单位时,编译也会报错,如:
$full-width: 960px;
.content {
width: $full-width - 1em;
}
编译的时候,编译器报"Incompatible units: 'em' and ‘px’."错误。
3.乘法
Sass中的乘法运算和加法减法运算略有不同,虽然它支持多种单位,但当一个单位同时声明两个值时会有问题。比如下面的示例:
.box {
width:10px * 2px;
}
编译的时候报"20px*px isn't a valid CSS value."错误信息。
如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可,上面的示例可以修改成:
.box {
width: 10px * 2;
}
编译出来的CSS:
.box {
width: 20px;
}
Sass的乘法运算和加法、减法运算一样,在运算中有不同类型的单位时,也将会报错。
.box {
width: 20px * 2em;
}
编译时报: " 40em*px isn't a valid CSS value. " 的错误信息。
4.除法
Sass的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。在Sass中做除法运算时,直接使用" / "符号作为除号时,将不会生效,编译时既得不到我们需要的效果也不会报错。来看一个简单的示例:
.box {
width: 100px / 2;
}
编译出来的CSS如下:
.box {
width: 100px / 2;
}
这样的结果对于大家来说没有任何意义。要修正这个问题,只需要给运算的外面添加一个小括号 () 即可:
.box {
width: (100px / 2);
}
编译出来的CSS如下:
.box {
width: 50px;
}
除了上面情况带有小括号," / " 符号会当作除法运算符之外,如果" / "符号在已有的数学表达式中时,也会被认作除法符号。如下面示例:
.box {
width: 100px / 2 + 2in;
}
编译出来的CSS:
.box {
width: 242px;
}
另外,在 Sass 除法运算中,当用变量进行除法运算时," / " 符号也会自动被识别成除法,如下例所示:
$width: 1000px;
$nums: 10;
.item {
width: $width / 10;
}
.list {
width: $width / $nums;
}
编译出来的CSS:
.item {
width: 100px;
}
.list {
width: 100px;
}
综合上述," / " 符号被当作除法运算符时有以下几种情况:
• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。
如下所示:
//SCSS
p {
font: 10px/8px; // 纯 CSS,不是除法运算
$width: 1000px;
width: $width/2; // 使用了变量,是除法运算
width: round(1.5)/2; // 使用了函数,是除法运算
height: (500px/2); // 使用了圆括号,是除法运算
margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
}
编译出来的CSS:
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
Sass的除法还有一个情况,如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值,如下所示:
.box {
width: (1000px / 100px);
}
编译出来的CSS如下:
.box {
width: 10;
}
5.变量计算
在Sass中除了可以使用数值进行运算之外,还可以使用变量进行计算。这让Sass的数学运算功能变得更加实用。一起来看一个简单的例子:
$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;
.container {
width: $content-width + $sidebar-width + $gutter;
margin: 0 auto;
}
编译出来的CSS:
.container {
width: 960px;
margin: 0 auto;
}
6.数字运算
在Sass运算中数字运算时较为常见的,数字运算包括前面介绍的:加法、减法、乘法和除法等运算,而且还可以通过括号来修改它们的运算先后顺序。和我们的数学运算是一样的,一起来看一个示例:
.box {
width: ((220px + 720px) - 11 * 20 ) / 12 ;
}
编译出来的CSS:
.box {
width: 60px;
}
7.颜色运算
所有算数运算都支持颜色值,并且是分段运算的。也就是说,红、绿和蓝各颜色分段单独进行运算。如:
p {
color: #010203 + #040506;
}
计算公式为01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09,并且被合成,编译出来的CSS为:
p {
color: #050709;
}
算数运算也能将数字和颜色值一起运算,同样也是分段运算的。如:
p {
color: #010203 * 2;
}
计算公式为01 * 2 = 02 、02 * 2 = 04 和 03 * 2 = 06,并且被合成为:
p {
color: #020406;
}
8.字符运算
在Sass中可以通过加法符号 "+" 来对字符串进行连接。例如:
$content: "Hello" + "" + "Sass!";
.box:before {
content: " #{$content} ";
}
编译出来的CSS:
.box:before {
content: " Hello Sass! ";
}
除了在变量中做字符连接运算之外,还可以直接通过+,把字符串连接在一起:
div {
cursor: e + -resize;
}
编译出来的CSS:
div {
cursor: e-resize;
}
注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 例如:
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
编译出来的CSS:
p:before {
content: "Foo Bar";
font-family: sans-serif; }