[Sass運算]除法

Sass的乘法運算規則也適用於除法運算。不過除法運算還有一個特殊之處。眾所周知“/”符號在CSS中已做為一種符號使用。因此在Sass中做除法運算時，直接使用“/”符號做為除號時，將不會生效，編譯時既得不到我們需要的效果，也不會報錯。一起先來看一個簡單的示例：

.box {
  width: 100px / 2;  
}

編譯出來的CSS 如下：

.box {
  width: 100px / 2;
}

這樣的結果對於大家來說沒有任何意義。要修正這個問題，只需要給運算的外面添加一個小括號( )即可：

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

編譯出來的CSS 如下：

.box {
  width: 50px;
}

除了上面情況帶有小括號，“/”符號會當作除法運算符之外，如果“/”符號在已有的數學表達式中時，也會被認作除法符號。如下面示例：

.box {
  width: 100px / 2 + 2in;  
}

編譯出來的CSS：

.box {
  width: 242px;
}

另外，在Sass除法運算中，當用變量進行除法運算時，“/”符號也會自動被識別成除法，如下例所示：

$width: 1000px;
$nums: 10;

.item {
  width: $width / 10;  
}

.list {
  width: $width / $nums;
}

編譯出來的CSS:

.item {
  width: 100px;
}

.list {
  width: 100px;
}

綜合上述，”/ ”符號被當作除法運算符時有以下幾種情況：

•如果數值或它的任意部分是存儲在一個變量中或是函數的返回值。
•如果數值被圓括號包圍。
•如果數值是另一個數學表達式的一部分。

如下所示：

//SCSS
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

編譯出來的CSS

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }

Sass 的除法運算還有一個情況。我們先回憶一下，在乘法運算時，如果兩個值帶有相同單位時，做乘法運算時，出來的結果並不是我們需要的結果。但在除法運算時，如果兩個值帶有相同的單位值時，除法運算之後會得到一個不帶單位的數值。如下所示：

.box {
  width: (1000px / 100px);
}

編譯出來的CSS如下：

.box {
  width: 10;
}