在Sass中，共有4種數字運算：
這4種運算方式，我們在其他編程語言（如JavaScript）也能看到，但是Sass的這4種運算不太一樣，還是有不少我們需要注意的地方。所以在這一節中，小伙伴們要細心留意一下。
在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加法是一樣的。
舉例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會報錯而編譯不通過。其實，小伙伴們稍微想一下平常數學中的運算，就很容易明白。
舉例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;
}
我們都知道，“/”在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種情況：
舉例：
$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;
}
分析：
在實際開發中，不管是加法、減法，還是乘法、除法運算，我們都建議在外面加上小括號。這種書寫方式，能夠使得代碼一目了然，也方便維護。希望小伙伴們也規范一下自己的書寫方式。