标签：
混合宏的作用：
相当于把复杂的变量声明集中在一起，免去了单个变量的调用。
声明：@mixin border{}
调用：@include border;
混合宏的分类：
不带参数：
@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; }
带参数：
//默认有值
@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; }
.box { @include border-radius; }
//无值
@mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(3px); }
//默认有值,任然赋值 @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; //20% border-radius: $radius; //20% } .box { @include border-radius(20%); }
复杂：当带有多个参数时，使用"..."代替
@mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }
但混合宏有个缺陷，没法合并相同的样式。
//这是我们经常做的事，把相同的样式写在一起
.box , .tab{ background-color:#222; } .box{ color:#000; } .tab{ color:#111; }
对应的混合宏
@mixin backgroundColor{ background-color:#222; } .box{ @include backgroundColor; color:#000; } .tab{ @include backgroundColor; color:#111; } //编译后 .box{ background-color:#222; color:#000; } .tab{ background-color:#222; color:#111; }
没有将相同的合并在一起，但使用接下来的 Sass学习之 Sass语法入门--4.扩展/继承 便能解决这个问题
标签：
原文地址：http://www.cnblogs.com/QRL909109/p/5594332.html
