SCSS 字串連線符

SCSS中，加號（+）不但可以實現算術加運算，也可以實現字串連線操作。

關於算術運算的內容參閱SCSS 算術運算子一章節。

先來看一段程式碼例項：

[Scss] 純文字檢視 複製程式碼
p {
  cursor: e + -resize;
}

程式碼將會編譯為:

[CSS] 純文字檢視 複製程式碼
p {
  cursor: e-resize; 
}

特別說明：如果有引號的字串被新增了一個沒有引號的字串 （也就是，帶引號的字串在 + 符號左側）， 結果會是一個有引號的字串。 同樣，如果一個沒有引號的字串被新增了一個有引號的字串 （沒有引號的字串在 + 符號左側）， 結果將是一個沒有引號的字串。

程式碼例項如下：

[Scss] 純文字檢視 複製程式碼
p:before {
  content: "softwhy.com " + scss;
  font-family: sans- + "serif";
}

編譯成css結果如下：

[CSS] 純文字檢視 複製程式碼
p:before {
  content: "softwhy.com scss";
  font-family: sans-serif; 
}

在文字字串中，#{} 形式的表示式可以被用來在字串中新增動態值：

[Scss] 純文字檢視 複製程式碼
p:before {
  content: "antzone is #{1 + 2} years old";
}

編譯後的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
p:before {
  content: "antzone is 3 years old"; 
}

#{}可以參閱SCSS #{}插值一章節。