CSS外掛：Sass 之Interpolation#{}的用法

學習Sass無非就是想高效的、 面向對象編寫CSS，Sass中的Interpolation#{}就是重要的一部分。開始一探究竟...

1. 簡單的栗子

SCSS：

@charset "UTF-8"; //不聲明在ruby編譯時會報錯，由於下面有中文註釋;
$prop1: border; //一個值；
@mixin set-one($side, $val){
    #{$prop1}-#{$side}: $val;
    //#{$prop1}-$side: $val; <= 這樣寫編譯會出現錯誤，記得#{$side};
}
.box-bor{
    @include set-one(width, 2px);
    @include set-one(style, dashed);
    @include set-one(color, green);    
}

被編譯爲：

.box-bor {
  border-width: 2px;
  border-style: dashed;
  border-color: green;
  //咦！不對啊，寫border通常不都這樣嘛! => border: 2px dashed green; 請看下面
}

2. 如何編譯出 border: 2px dashed green;

SCSS：

@mixin set-more($wid, $sty, $col){
    #{$prop1}: #{$wid} #{$sty} #{$col}; //其實就是結合混合宏傳多個參數;
}
.box-bor2{
    @include set-more(2px, dashed , green);
}

被編譯爲：

.box-bor2 {
  border: 2px dashed green;
}

3. 結合 @each 多個值操做

SCSS：

//$prop2: (padding, margin); //多個值用括號;
$prop2: padding, margin; //也能夠這樣;
@mixin set-prop($side, $val){
    @each $prop in $prop2{ //遍歷$prop2裏的全部值（margin,padding）
        #{$prop}-#{$side}: $val; //注意'-'先後不能有空格;
    }
}
.box{
    @include set-prop(left, 16px);
}

被編譯爲：

.box {
  padding-left: 16px;
  margin-left: 16px;
}

4. 構建選擇器

用過bootstrap的都知道，它的button有個預約義樣式，如今我也來試試：
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

SCSS：

@mixin selector($c, $s, $i, $w, $d, $sc, $ic, $wc, $dc){
    .#{$c}-success{ background-color: $s; border-color:$sc; }
    .#{$c}-info   { background-color: $i; border-color:$ic; }
    .#{$c}-warning{ background-color: $w; border-color:$wc; }
    .#{$c}-danger { background-color: $d; border-color:$dc; }
}
//@include selector('btn', #5cb85c, #5bc0de, #f0ad4e, #d9534f, //background-color
                           #4cae4c, #46b8da, #eea236, #d43f3a); //border-color
//$c可(可不)帶單雙引號，上面代碼換行爲了好方便閱讀，固然編譯的時候也是能正常編譯的;
//直接@include selector調用編譯後是沒有.btn;

.btn{
    color: #fff;
    @include selector(btn, #5cb85c, #5bc0de, #f0ad4e, #d9534f,
                           #4cae4c, #46b8da, #eea236, #d43f3a); 
}

被編譯爲：

.btn {
  color: #fff;
}
.btn .btn-success {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn .btn-info {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn .btn-warning {
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn .btn-danger {
  background-color: #d9534f;
  border-color: #d43f3a;
}

5. 錯誤用法的栗子

剛剛構建了一個選擇器，可能會讓你想到超級mixins，用來生成另外一個mixins。這可能限制很擅長使用Sass變量的插值(Interpolation)。看下面的代碼：

SCSS：

$btn-success: #5cb85c;
$btn-info: #5bc0de;
$btn-warning: #f0ad4e;
$btn-danger: #d9534f;
@mixin set-bg($name) {
    background-color: $btn-#{$name};//btn有多種狀態,都存在變量裏;
}
.btn {
    @include set-bg(success);
}

上面的代碼的寫法，編譯會報錯：
(Line 52: Undefined variable: "$btn-".)

因此，#{} 語法並非哪都能用；一樣在 mixin 中調用：

@mixin btn-status {
    margin-top: 20px;
    background: #F00;
}
$flag: "status";
.box {
    @include btn-#{$flag};
}

也會報錯：
(Line 64: Invalid CSS after "...nclude updated -": expected "}", was "#{$flag};")

好在有 @extend，能夠使用@extend插值

SCSS：

%btn-status { //不能像mixin那樣傳參了！
    margin-top: 20px;
    background: #F00;
}
$flag: "status";
.foo {
    @extend %btn-#{$flag};
}

被編譯爲：

.foo {
  margin-top: 20px;
  background: #F00;
}

6. Reference API

SASS_REFERENCE — Sass Documentation #Interpolation

若有不正之處，歡迎指正。最近在玩蕾絲了^_^