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