SCSS 算術運算子

由於scss具有程式語言的特點，那麼運算子是必不可少的。

下面就通過程式碼例項分別做一下介紹。

一.賦值運算子:

賦值運算子就是我們最為熟悉的冒號（:），用來給宣告的變數賦值。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
$highlight-color: #F90;

更多關於變數宣告的內容可以參閱SCSS變數的宣告一章節。

二.算數運算子:

在scss中，算數運算子包括加減乘程式和求餘，分別用如下符號表示:

[Scss] 純文字檢視 複製程式碼
+、-、*、/和%

算數運算子只能夠用於相同單位的數值運算。

[Scss] 純文字檢視 複製程式碼
div {
  /*單位不一致，編譯報錯*/
  font-size: 5px + 2em;
  /*7px，如果有一個運算元沒有單位，則預設使用另一個運算元的單位。*/
  font-size: 5px + 2;
}

上面的是加法運算子的程式碼例項。

[Scss] 純文字檢視 複製程式碼
div {
  font-size: 5px * 2;
  /*具有相同單位的數值相乘會報錯*/
  font-size: 5px * 2px;
}

上面是乘法運算子的程式碼例項。

除法運算子（/）需要特別注意一下，因為除法運算子本身也是css語法的一部分。

程式碼例項如下:

[CSS] 純文字檢視 複製程式碼
font: 16px / 24px Arial sans-serif;

下面就來介紹一下在scss中，哪些情況會被認為是除法運算，哪些情況被認為是css原生語法。

程式碼如下:

[Scss] 純文字檢視 複製程式碼
div {
  /*不執行除法操作，原樣輸出*/
  font-size: 16px / 24px; 
  /*使用插值語法之後，原樣輸出*/
  font-size: #{$base-size} / #{$line-height}; 
  /* 使用括號包裹之後，執行除法操作*/
  font-size: (16px / 24px); 
  /* 使用變數，執行除法操作*/
  font-size: $base-size / $line-height; 
  /* 呼叫函式，執行除法操作*/
  opacity: random(4) / 5; 
  /* 使用算術操作符，執行除法操作*/
  padding-right: 2px / 4px + 3px; 
}

關於#{}插值語法可以參閱scss #{}插值一章節。

scss中的算數運算子和普通算數運算子一樣，也具有優先順序概念:

（1）.乘除法的優先順序要高於加減法。

（2）.小括號中的運算具有最高優先順序。