六、混入指令

混入

混入(mixin)定义可以在整个样式表中重复使用的样式，而避免了使用无语意的类,类似js方法

混入可以带arguments，引入变量，只需少量的混入(mixin)代码就能输出多样化的样式

混入(mixin)通过 @mixin 指令定义。在它后面跟混入的名称和任选的arguments（参数），以及混入的内容块

@mixin large-text {
  font: {
    family: Arial;
    weight: bold;
  }
  color: #ff0000;
}
调用：@include large-text;

使用 @include 指令可以将混入（mixin）引入到文档中

.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）可以用 SassScript 值作为参数，给定的参数被包括在混入（mixin）中并且作为为变量提供给混入（mixin）

@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; border-style: dashed; }

混入（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; }

混入（mixin）在引入（@include指令）的时候也可以使用明确的关键字参数

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

可变参数：有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数时

@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
编译为：

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

可变参数可以包含任何关键字参数传递给混入（mixin）或者函数（function）

@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);
.secondary {
  @include colors($value-map...);
}
编译为：

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

样式内容块可以传递到混入（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: 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; }

函数指令

Sass 支持自定义函数，并能在任何值或脚本上下文中使用

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
编译成:

#sidebar { width: 240px; }

函数可以访问任何全局定义的变量，以及接受参数，跟混入类似

函数可以包含语句，并且必须调用@return来设置函数的返回值

混入

函数指令

猜你喜欢