Sass学习之路(9)——插值 #{}

在Sass中，除了在设置属性的值的时候，我们可以使用变量或循环等方式赋值以外。属性的名称，选择器名称等，都可以使用一种叫插值的方式将字符串插入进来。下边我们来看一个例子：

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

$ properties可以看作JS中的数组，这里的混合宏中遍历了这个数组，并传入了一个代表方向的参数。将变量放在#{}中，便实现了类似字符串拼接的效果，最终编译结果如下：

.login-box {

  margin-top: 14px;

  padding-top: 14px; }

再来看一个用插值来构建选择器的栗子：

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

编译结果如下：

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

可以看出插值的使用对CSS代码的简化和规则化是挺有作用的，但是并不是处处可用哦。

这里总结一下我目前发现的插值不可用的情况：

1.插值不能用在属性的值中，也就是不能出现在冒号后边，否则会报错，无法识别。

2.不能用来调用混合宏，如@include updated-#{$flag}   ，这里的插值同样不会被识别。（但是经过试验，@extend后边使用插值是可以的）。