13：sass中插值的使用

sass中插值的使用

设置属性值可以使用字符串插进来

sass：

@mixin set-value($side,$value){
  margin-#{$side}:$value;
  padding-#{$side}:$value;
}
.box{
  @include set-value(top,30px)

css：

.box {
  margin-top: 30px;
  padding-top: 30px; }

sass：

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

css：

.box {
  margin-top: 20px;
  padding-top: 20px; }

sass：

@mixin set-sizes($class,$small,$middle,$big){
  .#{$class}-small{font-size: $small}
  .#{$class}-middle{font-size: $middle}
  .#{$class}-big{font-size: $big}
}
.box{
  @include set-sizes("head-font",10px,20px,30px)
}

css：

.box .head-font-small {
  font-size: 10px; }
.box .head-font-middle {
  font-size: 20px; }
.box .head-font-big {
  font-size: 30px; }