~~~
$props:(margin,padding);
@mixin set-value($value){
@each $prop in $props {
#{$prop}:$value
}
}
div{
@include set-value(12px);
}
~~~
## 1.使用變量
~~~
@mixin m-v($margin,$v){
#{$margin}:$v;
}
div{
@include m-v(top,10px)
}
~~~
## 2.使用變量構建選擇器
~~~
@mixin g-z($class,$w){
#{$class}{width:$w};
}
@include g-z(".one",100px )
~~~
## 3.配合@extend使用
~~~
%w-h{
width:100px;
height:100px;
}
$h:"h";
div{
@extend %w-#{$h}
}
~~~
