本文共 1570 字，大约阅读时间需要 5 分钟。

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

9.1. 定义混合指令 @mixin (Defining a Mixin: @mixin)

混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：

@mixin large-text {  font: {    family: Arial;    size: 20px;    weight: bold;  }  color: #ff0000;}

——————————————————————————————————————————————————————

4.3. 属性嵌套 (Nested Properties)

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky {  font: {    family: fantasy;    size: 30em;    weight: bold;  }}

编译为

.funky {  font-family: fantasy;  font-size: 30em;  font-weight: bold; }

—————————————————————————————————————————————————————— 

9.2. 引用混合样式 @include (Including a Mixin: @include)

使用 @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 compound {  @include highlighted-background;  @include header-text;}@mixin highlighted-background { background-color: #fc0; }@mixin header-text { font-size: 20px; }

9.3. 参数 (Arguments) 

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

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

就了解这些吧，其他自己看文档