Sass四种数字运算详细介绍
在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;
}
分析：
在实际开发中，不管是加法、减法，还是乘法、除法运算，我们都建议在外面加上小括号。这种书写方式，能够使得代码一目了然，也方便维护。希望小伙伴们也规范一下自己的书写方式。