6、SASS-混入指令

6、混入指令

混入

• 混入(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来设置函数的返回值