SCSS #{} 插值

很多從事前端的朋友應該看到#{}感覺非常眼熟，因為這是ES2015新增的佔位符。

佔位符大括號中可以是任意的合法表示式，能夠很方便的實現字串連線操作。

SCSS的#{}與JavaScript中的佔位符非常的類似，也具有計算並返回表示式的值和資料拼接操作。

由此也可以看到，多學習一門語言或者周邊知識，能夠開闊思路，有利於問題的解決。

關於JavaScript佔位符相關知識可以參閱${} 佔位符用法一章節。

通常情況下，SCSS中的變數只能作為屬性值或者運算數，不能直接與其他資料拼接起來。

首先看一段程式碼例項：

[Scss] 純文字檢視 複製程式碼
$name: foo;
$attr: border;
p.$name {
  $attr-color: blue;
}

程式碼分析如下：

（1）.宣告兩個變數$name和$attr，並分別賦值。

（2）.變數$name直接與選擇器p連線在一起。

（3）.變數$attr直接與-color連線在一起。

上面的使用非常粗暴，就如同JavaScript宣告一個變數web，強行和其他字串拼接在一起，如web"螞蟻部落"。

上述SCSS程式碼編譯成CSS，會報錯如下：

[Scss] 純文字檢視 複製程式碼
Error: Invalid CSS after "p.": expected class name, was "$name"

使用本文的主角#{} 可以很好的解決上述問題，程式碼修改如下：

[Scss] 純文字檢視 複製程式碼
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

上述程式碼將變數放在大括號中，應用方式與JavaScript中的佔位符如出一轍。

對齊進行一下分析，以便於理解與記憶：

（1）.#{}大括號中可以是任何有效的表示式，然後計算並返回這個表示式的值。

（2）.$name與$attr都是變數，放在大括號的時候，它們都是一個表示式，能夠返回它們各自的值。

（3）.返回值可以與其他內容進行拼接，或者說在指定位置插入了這個返回值，最終實現了插值操作。

上述程式碼最終編譯成CSS，結果如下：

[CSS] 純文字檢視 複製程式碼
p.foo {
  border-color: blue; 
}

再來看一段關於#{}的應用例項，程式碼如下：

[Scss] 純文字檢視 複製程式碼
p {
  $font-size: 12px;
  $line-height: 30px;
  font: $font-size/$line-height;
}

上面是一段簡單的SCSS程式碼，宣告兩個變數$font-size和$line-height，並對它們賦值。

程式碼的本意是通過font設定當前元素的字型大小與行高，然而編譯成CSS卻是如下結果：

[CSS] 純文字檢視 複製程式碼
p {
  font: 0.4; 
}

很明顯程式碼將斜槓當做了除法運算子，並計算出兩個變數相除的結果。

雖然沒有語法錯誤，但是卻沒有達到我們的預期效果，通過#{} 可以輕鬆解決上述問題，程式碼修改如下：

[Scss] 純文字檢視 複製程式碼
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

將兩個變數分別放入大括號中，程式設計CSS程式碼如下：

[CSS] 純文字檢視 複製程式碼
p {
  font: 12px/30px; 
}

通過利用#{}實現了我們的預期效果，斜槓並沒有被當做除法運算子。

可以記住這個特點，當然也可以試著以JavaScript的思路進行理解，畢竟SCSS是模擬程式語言，#{}會對錶達式進行計算並返回其值，我們可以認為返回的值是一個字串型別，那麼就產生一個字串上下文環境，斜槓被認作字串的一部分，自然就不會當做除法運算子使用，當然SCSS內部的解析也許並非如此，以上述方式理解僅僅是接受並記憶概念的一家之言。