#### 1.4[Sass運算]除法 **注意：**Sass的乘法運算規則也適用于除法運算，不過除法運算有特殊之處，因為”/”符號在CSS中已經作為一種符號使用，因此在Sass中直接使用”/”作為除號時，將不會生效，編譯時既不會報錯，也不會得到我們想要的效果。除號的作用用空格隔開，也不會得到想要的效果。 如: ~~~ .box{ width: 100px / 2; } ~~~ 轉化成CSS: ~~~ .box { width: 100px / 2; } ~~~ **要修正這個文字，只需要給運算的外面添加一對小括號()即可**。 ~~~ .box{ width: (100px / 2); } ~~~ 轉化成CSS: ~~~ .box { width: 50px; } ~~~ **除了小括號以外，如果除了 “/” 外，還有其它的運算符號，那么也會被當作除號看待。** 列1 sass樣式 ~~~ .box { width: 100px / 2 + 20px; } ~~~ 轉化成CSS： ~~~ .box { width: 70px; } ~~~ 列2 sass樣式 ~~~ .box { width: ((220px + 720px) - 11 * 20 ) / 12 ; } ~~~ 轉化成css樣式 ~~~ .box { width: 60px; } ~~~ 另外，如果是**用變量進行除法運算，”/”也會自動被識別為除法**。 如: 列1：sass樣式 ~~~ $width: 960px; .col { width: $width / 10; } ~~~ 轉化成CSS: ~~~ .col { width: 96px; } ~~~ 列2：sass樣式 ~~~ $sidebar-width: 220px; $content-width: 720px; $gap-width: 20px; .container { width: $sidebar-width+$content-width/$gap-width; margin: 0 auto; } ~~~ 轉化成CSS: ~~~ .container { width: 256px; margin: 0 auto; } ~~~ * * * * * 綜合上述，”/ ”符號被當作除法運算符時有以下幾種情況： 1. 如果數值被圓括號包圍。 2. 如果數值是另一個數學表達式的一部分，即用上加減乘其他運算 3. 有變量進行除法 **注意：**在除法運算時，如果**兩個值帶有相同的單位值時，除法運算之后會得到一個不帶單位的數值**。 如：sass樣式 ~~~ .box { width: (1000px / 100px); } ~~~ 轉化成css ~~~ .box { width: 10; } ~~~