[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}
}
~~~