• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

4.2 数字运算

在Sass中,共有4种数字运算:

  • (1)加法;
  • (2)减法;
  • (3)乘法;
  • (4)除法;

这4种运算方式,我们在其他编程语言(如JavaScript)也能看到,但是Sass的这4种运算不太一样,还是有不少我们需要注意的地方。所以在这一节中,小伙伴们要细心留意一下。

一、Sass加法

在Sass中,做加法运算时,数值可以带单位,但是需要运算单位相同。如果不相同就会报错,编译不通过。

举例1:运算单位相同

 
div
{
    width:(100px + 20px);
}

编译出来的CSS代码如下:

 
div
{
    width:120px;
}

分析:

由于“100px”和“20px”的单位相同,都是px。所以在Sass中,这两个可以做加法运算。

举例2:运算单位不同

 
div
{
    width:(100px + 20em);
}

编译出来的CSS代码如下:

 
Incompatible units: 'em' and 'px'.

分析:

因为“100px”和“20em”单位不同,所以在Sass编译的时候会报错。其中,“Incompatible units: 'em' and 'px'.”意思是“em和px单位不一致”。

我们再来看一个实际开发中的例子,体会一下Sass加法的用法:

 
$sidebar-width:220px;
$content-width:720px;
$gap-width:20px;
.container
{
    width: ($sidebar-width + $content-width + $gap-width)
    margin: 0 auto;
}

编译出来的CSS代码如下:

 
.container
{
    width:960px;
    margin:0 auto;
}

二、Sass减法

在Sass中,做减法运算时,数值可以带单位,但是需要运算单位相同。如果不相同就会报错,编译不通过。这一点跟Sass加法是一样的。

举例1:运算单位相同

 
div
{
    width:(100px - 20px);
}

编译出来的CSS代码如下:

 
div
{
    width:80px;
}

分析:

由于“100px”和“20px”的单位相同,都是px。所以在Sass中,这两个可以做减法运算。

举例2:运算单位不同

 
div
{
    width:(100px - 20em);
}

编译出来的CSS代码如下:

 
Incompatible units: 'em' and 'px'.

分析:

因为“100px”和“20em”单位不同,所以在Sass编译的时候会报错。其中,“Incompatible units: 'em' and 'px'.”意思是“em和px单位不一致”。

我们也来看一个实际开发中的例子,体会一下Sass减法的用法:

 
$container-width:960px;
$sidebar-width:200px;
.content
{
    width: ($container-width - $sidebar-width);
}

编译出来的CSS代码如下:

 
.content
{
    width:760px;
}

分析:

在Sass中,如果是做减法运算是“变量”而不是“数值”的时候,我们要注意减号“-”前后一定要有空格。像上面这个例子,如果减号前后没有空格:

 
$container-width:960px;
$sidebar-width:200px;
.content
{
    width: ($container-width-$sidebar-width);
}

像上面这样,Sass是无法正确地识别哪个“-”是变量的一部分,哪个“-”是减号。不过对于Sass中的加法,则不需要考虑这一点。

三、Sass乘法

在Sass中,做乘法运算时,只能有一个数值带单位,另外一个数值只能是不带单位的数字。如果两个都是带单位的数字,则Sass会报错而编译不通过。其实,小伙伴们稍微想一下平常数学中的运算,就很容易明白。

举例1:一个带单位,另外一个不带单位

 
div
{
    width:(100px * 2);
}

编译出来的CSS代码如下:

 
div
{
    width:200px;
}

举例2:两个都带单位

 
div
{
    width:(100px * 2px);
}

编译出来的CSS代码如下:

 
200px*px isn't a valid CSS value.

分析:

“200px*px isn't a valid CSS value.”意思是:200px*px不是一个有效的CSS属性值。我们再来看一个实际开发中的例子,体会一下Sass乘法的用法:

 
@for $i from 1 through 3
{
    .item-#{$i}
    {
        width:10px * $i;
    }
}

编译出来的CSS代码如下:

 
.item-1 
{
    width: 10px;
}
.item-2 
{
    width: 20px;
}
.item-3 
{
    width: 30px;
}

四、Sass除法

我们都知道,“/”在CSS中已经作为一种符号来使用了,例如我们常见的字体属性缩写“font:Arial 12px/1.5em”。因此在Sass中做除法运算的时候,如果我们直接使用“/”符号作为除号,将不会生效。

在Sass中,如果我们想要做除法运算,我们需要在外面添加一个“小括号()”。

举例:

 
div
{
    width:(100px/2);
}

编译出来的CSS代码如下:

 
div
{
    width:50px;
}

分析:

在这个例子中,如果我们将小括号去掉,则Sass编译的时候会报错。但是在Sass中,如果做除法运算中是“变量”而不是“数值”时,“/”会被自动识别为除法,不需要在外面添加小括号。

举例:

 
$width:100px;
div
{
    width:$width/2;
}

编译出来的CSS代码如下:

 
div
{
    width:50px;
}

在使用Sass的过程中,“/”这个符号被当做除法运算时有以下3种情况:

  • (1)数值被小括号()包含;
  • (2)数值是另外一个数学表达式的一部分;
  • (3)数值或它的任意部分存储在一个变量中或者函数的返回值;

举例:

 
$height:100px;
div
{
    font:20px/10px;                 //纯CSS,不是除法运算
    width:(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;
}

分析:

在实际开发中,不管是加法、减法,还是乘法、除法运算,我们都建议在外面加上小括号。这种书写方式,能够使得代码一目了然,也方便维护。希望小伙伴们也规范一下自己的书写方式。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部