前端开发小技巧css预处理语言sass

混合器

混合器使用@mixin标识符定义，通过@include来使用这个混合器，用来解决大段重用的代码。

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & {
    height: 1px;
  }
}

.clearfix {
  @include clearfix;
}

.clearfix {
  display: inline-block;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

* html .clearfix {
  height: 1px;
}

最强大的一点就是如同函数一般，可以传参，不仅可以指定默认值，并且可以使用关键词参数，这样就不用管参数前后顺序了：

@mixin border-value($width: 1px, $color: #333, $style: solid) {
  border-width: $width;
  border-color: $color;
  border-style: $style;
}
/*不传参*/
h1 {
  @include border-value;
}
/*传参*/
h2 {
  @include border-value(2px, #666, dashed);
}
/*关键词传参*/
h3 {
  @include border-value($style: dashed, $width: 3px, $color: #999);
}

/*不传参*/
h1 {
  border-width: 1px;
  border-color: #333;
  border-style: solid;
}

/*传参*/
h2 {
  border-width: 2px;
  border-color: #666;
  border-style: dashed;
}

/*关键词传参*/
h3 {
  border-width: 3px;
  border-color: #999;
  border-style: dashed;
}