顏色運算

所有算數運算都支持顏色值，並採用分段運算。

// scss //
p {
  color: #020403 + #070301;
}

編｜ 02 + 07 = 09
譯｜ 04 + 03 = 07 相加而得。
後｜ 03 + 01 = 04
　Ｖ

// css //
p {
  color: #090704;
}

• 算數運算也能將數字和顏色值一起運算，同樣也採用分段運算。

// scss //
p {
  color: #020403 * 2;
}

編｜ 02 * 2 = 04
譯｜ 04 * 2 = 08 相加而得。
後｜ 03 * 2 = 06
　Ｖ

// css //
p {
  color: #040806;
}

字符運算

• 使用加法符號+來對字符串進行連接。

// scss //
$content: "Good!" + " " + "Morining!";
.box:before {
  content: " #{$content} ";
}

編｜
譯｜
後｜
　Ｖ

// css //
.box:before {
  content: " Good! Morining! ";
}

• 使用加法符號+把字符連接。

// scss //
box {
  cursor: col + -resize;
}

編｜
譯｜
後｜
　Ｖ

// css //
box {
  cursor: col-resize;
}

• 在+符號左側有引號的字符串 -> 結果為有引號。
• 在+符號右側有引號的字符串 -> 結果為無引號。

// scss //
p:before {
  content: "Have " + Mark;
  content: No + " Mark";
}

編｜
譯｜
後｜
　Ｖ

// css //
p:before {
  content: "Have Mark";
  content: No Mark;
}