Sass学习之 Sass语法入门--3.混合宏

3.混合宏

混合宏的作用：

　　相当于把复杂的变量声明集中在一起，免去了单个变量的调用。

　　声明：@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.扩展/继承 便能解决这个问题