Sass中Interpolation#{}的用法

1. 简单的栗子

2. 如何编译出 border: 2px dashed green;

scss语法：

$prop2: border;
@mixin longzhoufeng($wid, $sty, $col){
    #{$prop2}: #{$wid} #{$sty} #{$col}; //其实就是结合混合宏传多个参数;
}
.myInterpolation2{
    @include longzhoufeng(2px, dashed , green);
}

css语法：

.myInterpolation2 {
  border: 2px dashed green; }

如图：

3. 结合 @each 多个值操作

scss语法：

@charset "UTF-8"; //不声明在ruby编译时会报错，因为下面有中文注释;
//$prop2: (padding, margin); //多个值用括号;
$prop3: padding, margin; //也可以这样;
@mixin longzhoufeng($side, $val){
    @each $prop in $prop3{ //遍历$prop2里的所有值（margin,padding）
        #{$prop}-#{$side}: $val; //注意'-'前后不能有空格;
    }
}
.myInterpolation3{
    @include longzhoufeng(left, 16px);
}

css语法

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

4. 构建选择器

scss语法：

@charset "UTF-8"; //不声明在ruby编译时会报错，因为下面有中文注释;
@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; }
}

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

css语法

.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;
}

/*# sourceMappingURL=main.css.map */