在數學運算中，只允許 單位相同 的數值進行運算。
如：無法同時對 px 與 em 進行運算。

加減法 (+ , -)

在變量或屬性中都可以做加減法運算。
需特別注意使用減法時，減號左邊一定要空格隔開，不然會和前面的內容進行拼接。 因此建議在運算符的兩邊都預留空格，這樣看著也舒服。

// scss //
.box {
  width: 20px + 89 - 2in; 
}

編｜
譯｜ 若數字後面沒有單位，換算結果則以有單位為準。
後｜
　Ｖ

// css //
.box {
  width: -83px;
}

• 單位不同，則編譯錯誤。

// scss //
.box {
  width: 20px + 89 - 2em; 
}

編｜
譯｜ 數字單位必須相同才能編譯成功。
後｜
　Ｖ

“Incompatible units: 'px' and 'em'.”錯誤。

乘法 (*)

支持多種單位（比如em ,px , %）。
二個數值相乘的結果其單位爲 原本單位的平方。

// scss //
.box {
  width: 20px * 2;
}

編｜
譯｜ 若數字後面沒有單位，換算結果則以有單位為準。
後｜
　Ｖ

// css //
.box {
  width: 20px;
}

• 在乘法運算中，二個數值相乘的結果其單位爲 原本單位的平方。

• 單位不同，則編譯錯誤。

// scss //
.box {
  width: 20px * 2em; 
}

編｜
譯｜ 數字單位必須相同才能編譯成功。
後｜
　Ｖ

“40em*px isn't a valid CSS value.”錯誤信息。

除法 (/)

一種 平分 的概念。
原本/符號在CSS中已做為一種符號使用。

”/ ”符號被當作除法運算符時有以下幾種情況：

1. 被除數可以使用 小括弧( ) 括住。

• 正確打法

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

編｜
譯｜ 在運算式外多加( )則編譯成功。
後｜
　Ｖ

// css //
.box {
  width: 50px;
}

• 錯誤打法

// scss //
.box {
  width: 100px / 2;  
}

編｜
譯｜ 單用/會編譯失敗。
後｜
　Ｖ

// css //
.box {
  width: 100px / 2;  
}

2. 被除數可以是另一個運算式。

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

編｜
譯｜ 在此運算式就算沒有小括弧( )也可辨別為除法。
後｜
　Ｖ

// css //
.box {
  width: 292px;
}

3. 被除數可以是 變數 或 函式回傳的數值。

// scss //
$length: 200em;
$nums: 10;

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

.item {
  length: $length / 10;  
}

編｜
譯｜ 使用變數 或 函式回傳的數值也可辨別為除法。
後｜
　Ｖ

// css //
.list {
  length: 20em;
}

.item {
  length: 20em;
}

4. 帶有相同單位的兩個值。

• 正確打法

// scss //
.box {
  width: (200em / 100em);
}

編｜
譯｜ 單位相同時，相除會自動把單位也相除掉。
後｜
　Ｖ

// css //
.box {
  width: 2;
}

• 錯誤打法

// scss //
p{
    font-size: 10px / 8px;
}

編｜
譯｜ 在此必須加上小括弧( )也可辨別為除法。
後｜
　Ｖ

// css //
p{
    font-size: 10px / 8px;
}