在之前我們已經使用用 / 來進行計算，但如下情況不一樣 例如 p{ font: 16px/30px Arial, Helvetica, sans-serif; } 如果需要使用變數，同時又要確保 / 不做除法運算，而是完整地編譯到 CSS 文件中，這種情況怎麼辦？？？可以使用 #{} 插值語句將變數 ...
在之前我們已經使用用 / 來進行計算，但如下情況不一樣
例如
p{
font: 16px/30px Arial, Helvetica, sans-serif;
}
如果需要使用變數，同時又要確保 / 不做除法運算，而是完整地編譯到 CSS 文件中，這種情況怎麼辦？？？可以使用 #{} 插值語句將變數包裹。
使用插值語法
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height} Helvetica,
sans-serif;
}
通過 #{} 插值語句可以在選擇器、屬性名、註釋中使用變數：
$class-name: danger;
$attr: color;
$author:'老姚';
/*
* 這是文件的說明部分
@author: #{$author}
*/
a.#{$class-name} {
border-#{$attr}: #F00;
}
編譯後
/*
* 這是文件的說明部分
@author: 老姚
*/
a.danger {
border-color: #F00;
}
插值語法說明
插值一般就指插入值在某個位置，該功能不是sass才有的，其實很多語言都有，例如前段的js，如果我們想輸出一個帶變數的值
var name = '張三',
age = 20;
console.log('我叫' + name + '，今年' + age + '歲！');
如果有很多變數要輸出，或這個串很長的情況是非常麻煩的，所以我們可以用模板字元串輸出，像這樣
var name = '張三',
age = 20;
console.log(`我叫${name}，今年${age}歲！`);
而sass中的插值用的是#{}把變數包裹起來的，變數可以是幾乎任意類型的值；
什麼時候會用到插值語法？
註釋、選擇器、屬性名等有變數輸出時
上面的安全便是該種情況
$class-name: danger;
$attr: color;
$author:'老姚';
/*
* 這是文件的說明部分
@author: #{$author}
*/
a.#{$class-name} {
border-#{$attr}: #F00;
}
用於調式
$themes:( 'light':#f00, 'dark':#000);
@function color($key) {
@if not map-has-key($themes, $key) {
@warn " $themes有key裡面不包含 `#{$key}`.";
}
@return map-get($themes, $key);
}
.container {
background-color: color('light');
}
更多使用場景歡迎補充
這些情況不能使用插值語法
不可插值用於變數的一部分
$font-size-big: 40px;
$font-size-base: 20px;
$font-size-small: 12px;
$size:big;
.block {
font-size: $font-size-#{$size}; // Error: Undefined variable.
}
不能在混入里使用
@mixin base {
margin-top: 20px;
background: #F00;
}
$flag: "base";
.navigation {
@include #{$flag}; // Error: Expected identifier.
}
@import後不能使用
$var:'common';
@import #{var};
.block {
font-size: $font-size;
}
還有更多情況...
最後總結
插值語法在使用中還是非常方便的，但有些情況不能使用，但不代表後續不能使用，具體情況根據當前使用的版本來，有可能現目前版本不支持的情況，後續版本可能會支持。
關於sass插件語法#{}的使用就介紹到這裡，更多教程請關註“老姚實戰營”！
