在Sass中,共有4种数字运算:
1.加法:在Sass中,做加法运算时,数值可以带单位,但是需要运算单位相同。如果不相同就会报错,编译不通过。
实例:
$sidebar-220px;
$content-720px;
$gap-20px;
.container
{
($sidebar-width + $content-width + $gap-width)
margin: 0 auto;
}
编译出来的css代码是:
.container
{
width
:
960px
;
margin
:
0
auto
;
}
2.减法:跟Sass加法是一样的,做减法运算时,数值可以带单位,但是需要运算单位相同。如果不相同就会报错,编译不通过。
需要注意的是:如果是做减法运算是“变量”而不是“数值”的时候,我们要注意减号“-”前后一定要有空格。不过对于Sass中的加法,则不需要考虑这一点。
3.乘法:做乘法运算时,只能有一个数值带单位,另外一个数值只能是不带单位的数字。如果两个都是带单位的数字,则Sass会报错而编译不通过。
4.除法:“/”在CSS中已经作为一种符号来使用了,例如我们常见的字体属性缩写“font:Arial 12px/1.5em”。因此在Sass中做除法运算的时候,如果我们直接使用“/”符号作为除号,将不会生效。因此在Sass中,如果我们想要做除法运算,我们需要在外面添加一个“小括号()”。
实例:
$100px;
div
{
($width/2);
}
编译出来的css代码:
div
{
width
:
50px
;
}
在Sass中,如果做除法运算中是“变量”而不是“数值”时,“/”会被自动识别为除法,不需要在外面添加小括号。
注意:在使用Sass的过程中,“/”这个符号被当做除法运算时有以下3种情况:
(1)数值被小括号()包含;
(2)数值是另外一个数学表达式的一部分;
(3)数值或它的任意部分存储在一个变量中或者函数的返回值;
举例:
$height:100px;
div
{
font:20px/10px; //纯CSS,不是除法运算
(20px/10px); //使用了小括号,是除法运算,符合第1点
height:$height/2; //使用了变量,是除法运算,符合第3点
line-height:round(1.5)/2; //使用了函数,是除法运算,符合第3点
margin-left:10px + 10px/2px; //使用了加号,是除法运算,符合第2点
}
编译出来的css代码如下:
div
{
font
:
20px
/
10px
;
width
:
2
;
height
:
50px
;
line-height
:
1
;
margin-left
:
15px
;
}
但是注意:在实际开发中,不管是加法、减法,还是乘法、除法运算,建议在外面加上小括号。这种书写方式,能够使得代码一目了然,也方便维护。