Sass--传多个参数

Sass 混合宏除了能传一个参数之外，还可以传多个参数，如：

@mixin center($width, $height) {
    width: $width;
    height: $height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -($height) / 2;
    margin-left: -($width) / 2;
}

在混合宏“center” 就传了多个参数。在实际调用和其调用其他混合宏是一样的：

.box {
   @include center(500px, 300px);
}

编译出来css:

.box-center {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -250px;
}

有一个特别的参数“...”。当混合宏的参数过多之时,可以使用的参数来替代如：

@mixin box-shadow($shadows...){
  @if length($shadows) >= 2 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  }
}

在实际调用中：

.box {
   @include box-shadow(0 0 1px rgba(#000, .5), 0 0 2px rgba(#000, .2));
}

编译出来的css:

.box {
   -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}