[Sass]插值#{}

使用CSS預處理器語言的一個主要原因是想使用Sass獲得一個更好的結構體系。比如說你想寫更乾淨的、高效的和麵向對象的CSS。Sass中的插值(Interpolation)就是重要的一部分。讓我們看一下下面的例子：

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

@each...in...語句會在《Sass進級篇》中1-6 @each循環中講解。

它可以讓變量和屬性工作的很完美，上面的代碼編譯成CSS：

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

這是Sass 插值中一個簡單的實例。當你想設置屬性值的時候你可以使用字符串插入進來。另一個有用的用法是構建一個選擇器。可以這樣使用：

@mixin generate-sizes($class, $small, $medium, $big) {

    .#{$class}-small { font-size: $small; }

    .#{$class}-medium { font-size: $medium; }

    .#{$class}-big { font-size: $big; }

}

@include generate-sizes("header-text", 12px, 20px, 40px);

編譯出來的CSS:

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

一旦你發現這一點，你就會想到超級酷的mixins，用來生成代碼或者生成另一個mixins。然而，這並不完全是可能的。第一個限制，這可能會很刪除用於Sass 變量的插值。

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}

上面的Sass 代碼編譯出來，你會得到下面的信息：

error style.scss (Line 5: Undefined variable: “$margin-".)

所以，#{}語法並不是隨處可用，你也不能在mixin 中調用：

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

上面的代碼在編譯成CSS 時同樣會報錯：

error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")
幸運的是，可以使用@extend中使用插值。例如：

%updated-status {
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
}

上面的Sass 代碼是可以運行的，因為他給了我們力量，可以動態的插入.class 和%placeholder。當然他們不能接受像mixin 這樣的參數，上面的代碼編譯出來的CSS:

.navigation {
    margin-top: 20px;
    background: #F00;
}
.selected-status, .navigation {
    font-weight: bold;
}

在Sass 的社區正在積極討論插值的局限性，誰又知道呢，也許我們很快將能夠使用這些技術也說不定呢。