使用 CSS 預(yù)處理器語(yǔ)言的一個(gè)主要原因是想使用 Sass 獲得一個(gè)更好的結(jié)構(gòu)體系。比如說(shuō)你想寫(xiě)更干凈的、高效的和面向?qū)ο蟮?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...語(yǔ)句會(huì)在《Sass進(jìn)級(jí)篇》中 1-6 @each循環(huán) 中講解。

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

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

這是 Sass 插值中一個(gè)簡(jiǎn)單的實(shí)例。當(dāng)你想設(shè)置屬性值的時(shí)候你可以使用字符串插入進(jìn)來(lái)。另一個(gè)有用的用法是構(gòu)建一個(gè)選擇器?？梢赃@樣使用：

@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);

編譯出來(lái)的 CSS:

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

一旦你發(fā)現(xiàn)這一點(diǎn)，你就會(huì)想到超級(jí)酷的 mixins，用來(lái)生成代碼或者生成另一個(gè) mixins。然而，這并不完全是可能的。第一個(gè)限制，這可能會(huì)很刪除用于 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 代碼編譯出來(lái)，你會(huì)得到下面的信息：

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

所以，#{}語(yǔ)法并不是隨處可用，你也不能在 mixin 中調(diào)用：

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

上面的代碼在編譯成 CSS 時(shí)同樣會(huì)報(bào)錯(cuò)：

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

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

上面的 Sass 代碼是可以運(yùn)行的，因?yàn)樗o了我們力量，可以動(dòng)態(tài)的插入 .class 和 %placeholder。當(dāng)然他們不能接受像 mixin 這樣的參數(shù)，上面的代碼編譯出來(lái)的 CSS:

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

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