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; }
在編輯器第四行輸入正確的代碼,讓.col的寬度是總寬度960px的十分之一。
在第四行的問號換成/
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報