[TOC]
## 1. 定义一些属性,传一个值将所有属性都设置这个值
~~~
$props:(margin,padding);
@mixin set-value($value){
@each $prop in $props {
#{$prop}:$value
}
}
div{
@include set-value(12px);
}
~~~
复制
## 1.定义个通用模板使用($margi为插槽 #{$..}可以理解为原样输出所代表的内容)
~~~
@mixin m-v($margin,$v){
#{$margin}:$v;
}
div{
@include m-v(top,10px)
}
~~~
## 2.生成类名和对应的css样式
~~~
@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}
}
~~~