Sass的運算

本節我們學習 Sass 中的運算，一般的編程語法中都支持使用運算，Sass 中同樣可以做各種數學運算，包括最基本的加減乘除運算、變量運算、顏色運算、字符運算等。本節我們主要講一下 Sass 中最基本的數學運算。

加法運算

加法運算 + 是 Sass 中基本運算之一，在變量或者屬性中都可以做加法運算。

示例：

$num:14px;
.xkd{
    width:50px + 50px;
    font-size: $num + 4px;
}

編譯成 CSS 代碼：

.xkd {
  width: 100px;
  font-size: 18px;
}

在進行運算時，還要注意所帶的單位，當單位不同時會導致報錯，例如：

.xkd{
    font-size: 12px + 2em;
}

執行代碼，報錯信息如下所示：

Error: Incompatible units: 'em' and 'px'.
        on line 2 of style.scss
  Use --trace for backtrace.

減法運算

Sass 中的減法運算和加法運算使用起來很類似，當使用不同類型的單位時也會報錯。

示例：

$width:100px;
.xkd{
    width: 500px - $width;
    height: 300 - $width;
}

編譯成 CSS 代碼：

.xkd {
  width: 400px;
  height: 200px;
}

乘法運算

Sass 中的乘法運算和加減法運算一樣，不同單位的值進行計算會導致報錯。但是它們之間還是有一些不同，當我們使用相同單位的值進行乘法運算時，會出現問題。

示例：

.xkd{
    width:100px * 2px;
}

執行的代碼後報錯信息如下所示：

Error: 200px*px isn't a valid CSS value.
        on line 2 of style.scss
  Use --trace for backtrace.

所以如果我們要進行乘法運算，兩個值需要爲其中一個指定單位即可：

.xkd{
    width:100px * 2;
}

編譯成 CSS 代碼：

.xkd {
  width: 200px;
}

除法運算

Sass 中的除法運算也和乘法運算差不多，不過除法運算還有一個不一樣的地方。在 CSS 中 / 符號已經作爲一種符號使用，所以當我們在做除法運算時，如果直接使用 / 符號，編譯後還是會原樣輸出，這樣並不是我們想要的效果。

示例：

.xkd{
    width:100px / 2;
}

編譯成 CSS 代碼：

.xkd {
  width: 100px / 2;
}

可以看到編譯後的 CSS 代碼中， / 符號並沒有進行計算。所以如果我們想要進行除法運算，要怎麼辦呢？

其實很簡單，只需要將運算表達式使用一對小括號 () 括起來即可，例如：

.xkd{
    width:(100px / 2);
}

編譯成 CSS 代碼：

.xkd {
  width: 50px;
}

除此之外，當我們在一個已經存在運算符的表達式中使用 / 符號時，不用小括號括起來，也能進行除法運算。

示例：

.xkd{
    width:100px + 300px / 2;
}

編譯成 CSS 代碼：

.xkd {
  width: 250px;
}

從編譯後的 CSS 代碼中可以看出，當一個表達式中有多種運算符時，和數學中一樣，先算乘除再算加減，有括號則先算括號裏的。