Scss强大的Mixins指令

原文链接 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#defining_a_mixin

定义一个Mixin: @mixin

@mixin large-text {
  font: {
    family: Arial; //会编译成font-family...
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

因为一些历史遗留问题，Mixin的命名可以连字符与下划线互换的，也就是说，large-text这个mixin也可以这样引入：include large_text，反之亦然。个人还是建议使用连字符来命名以及使用变量

引入一个Mixin: @include

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

最后被编译成：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

Mixin中也可以包含其它mixin，例如：

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

Mixin的参数

Mixin可以传递SassScript值作为参数，这个值就是在include的时候指定的。

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }

被编译成：

p {
  border-color: blue;
  border-width: 1in; //1in代表1英尺
  border-style: dashed; }

Mixin也能够指定参数的默认值，当你在include mixin的时候，如果没有传递参数，那么将使用默认值；如果重新传递了参数，那么就会覆盖默认值。

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); } //使用了默认宽度
h1 { @include sexy-border(blue, 2in); } //覆盖了默认宽度值

被编译成：

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

关键字参数

显式关键字参数方式引入

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

虽然这样看上去并不简洁，但是它的可读性更高了。
最大的优点是允许以任何顺序进行传参。

可变参数

对于一个s允许有不确定个数的参数是非常有意义的，比如说box-shadow属性，它允许定义多个阴影，可能有时候你也无法确定你需要的阴影个数，这时候你就需要Variable Arguments。

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

被编译成：

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

可变参数也可以以关键字方式传入：

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000); //使用了keywords($args)的方法，
.secondary {
  @include colors($value-map...);
}

keywords($args) function

被编译成：

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

还可以在s中引入其它：

@mixin wrapped-stylish-($args...) {
  font-weight: bold;
  @include stylish-($args...);
}

.stylish {
  // $width参数将作为关键字传入"stylish-" 
  @include wrapped-stylish-(#00ff00, $width: 100px);
}

传递内容块给一个mixin

通过@content来传递内容块

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

被编译成：

* html #logo {
  background-image: url(/logo.gif);
}

变量范围与内容块

在mixin外部申明的内容块的变量作用域无法指向mixin内部参数，例如下面的列子所示，$color指向全局作用域

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

被编译成：

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}