亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

[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;
}

 

任務

在編輯器第四行輸入正確的代碼,讓.col的寬度是總寬度960px的十分之一。

?不會了怎么辦

在第四行的問號換成/

||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?