Sixth, mixing instructions

Mixing

• Mixing (a mixin) define the style can be reused throughout the style sheet, intended to avoid the use of silent class, similar to the method js

Style mixing can take arguments, introduction of variable, only a small amount of mixing (a mixin) of code to output a variety of

• Mixing (a mixin) defined by @mixin instruction. Behind it is mixed with the contents of the name and optionally the arguments (parameters), and the mixed block

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

• Use @include instructions may be mixed into (a mixin) introduced into the document

.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; }

• Mixing (a mixin) SassScript may be used as a parameter value, the given parameters are included in a mixed (a mixin) as a variable and is supplied to the mixing (a 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; }

• Mixed (mixin) You can also use a common syntax for the variable assignment parameter specifies the default value when calling mixed, if not assigned to a parameter, then automatically uses the default values ​​instead of

@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; }

• Mixed (mixin) You can also use specific keywords parameter in the introduction (@include instructions) when

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

• Sometimes, a determination can not be mixed into (a mixin) or a function (function) number of parameters: a variable parameter

@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; }

• The variable parameter may comprise any keyword parameter passed to mixing (a mixin) or function (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; }

• Style content can be passed to block mixing (a mixin) comprising a pattern position. Anywhere @content instruction style content will appear in the block is mixed. This makes it possible to define abstract associated selection and instruction parsing

@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); }

• Contents to mix (a mixin) blocks in the scope of which is defined calculates, instead of mixing (a mixin) scopes

$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; }

Function command

• Sass support for custom functions, and can be used in the context of any value or script

$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; }

• Functions can access any variables defined globally, and accept parameters, with a similar mix
• Functions may contain statements, and must be called to set @return the return value of the function