Sass 的乘法運(yùn)算規(guī)則也適用于除法運(yùn)算。不過除法運(yùn)算還有一個(gè)特殊之處。眾所周知“/”符號在 CSS 中已做為一種符號使用。因此在 Sass 中做除法運(yùn)算時(shí)，直接使用“/”符號做為除號時(shí)，將不會生效，編譯時(shí)既得不到我們需要的效果，也不會報(bào)錯(cuò)。一起先來看一個(gè)簡單的示例：

.box {
  width: 100px / 2;  
}

編譯出來的 CSS 如下：

.box {
  width: 100px / 2;
}

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

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

編譯出來的 CSS 如下：

.box {
  width: 50px;
}

除了上面情況帶有小括號，“/”符號會當(dāng)作除法運(yùn)算符之外，如果“/”符號在已有的數(shù)學(xué)表達(dá)式中時(shí)，也會被認(rèn)作除法符號。如下面示例：

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

編譯出來的CSS：

.box {
  width: 242px;
}

另外，在 Sass 除法運(yùn)算中，當(dāng)用變量進(jìn)行除法運(yùn)算時(shí)，“/”符號也會自動被識別成除法，如下例所示：

$width: 1000px;
$nums: 10;

.item {
  width: $width / 10;  
}

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

編譯出來的CSS:

.item {
  width: 100px;
}

.list {
  width: 100px;
}

綜合上述，”/  ”符號被當(dāng)作除法運(yùn)算符時(shí)有以下幾種情況：

•    如果數(shù)值或它的任意部分是存儲在一個(gè)變量中或是函數(shù)的返回值。
•    如果數(shù)值被圓括號包圍。
•    如果數(shù)值是另一個(gè)數(shù)學(xué)表達(dá)式的一部分。

如下所示：

//SCSS
p {
  font: 10px/8px;             // 純 CSS，不是除法運(yùn)算
  $width: 1000px;
  width: $width/2;            // 使用了變量，是除法運(yùn)算
  width: round(1.5)/2;        // 使用了函數(shù)，是除法運(yùn)算
  height: (500px/2);          // 使用了圓括號，是除法運(yùn)算
  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運(yùn)算
}

編譯出來的CSS

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

Sass 的除法運(yùn)算還有一個(gè)情況。我們先回憶一下，在乘法運(yùn)算時(shí)，如果兩個(gè)值帶有相同單位時(shí)，做乘法運(yùn)算時(shí)，出來的結(jié)果并不是我們需要的結(jié)果。但在除法運(yùn)算時(shí)，如果兩個(gè)值帶有相同的單位值時(shí)，除法運(yùn)算之后會得到一個(gè)不帶單位的數(shù)值。如下所示：

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

編譯出來的CSS如下：

.box {
  width: 10;
}