Mixin，你可以把它想成是一块有名字的定义好的样式，可以在任何地方重复去使用它。mixin 中文一般会翻译成混合，如果你了解 JavaScript ，Mixin 有点像是 JavaScript 里面的函数，每个 Mixin 都有自己的名字，使用这个名字你可以去调用它，定义 mixin 的时候，你还可以给它添加参数，让这个 mixin 更灵活一些。

在 Sass 里面定义 Mixin ，用的是 @mixin ... 后面加上要定义的mixin 的名字，如果定义的这个 mixin 支持使用参数的话，可以把需要的参数放在 mixin 名字的后面的括号里 ... 然后是一组花括号，在花括号里面可以去添加一些东西，在这里你可以添加普通的 CSS 规则，或者使用 Sass 的其它的特性，比如变量，嵌套，函数等等。

下面，我们去定义一下 mixin ... 先输入一个 @mixin .. 一个空格 ... 然后是这个 mixin 的名字，我们叫它 alert ... 这个 mixin 暂时不支持使用参数 ... 后面 直接添加一组花括号 ...

然后在这里面，去添加点 CSS 的样式 ... 一个 color 属性 ... 再加上一个 background-color ... 设置一种颜色 ...

@mixin alert {
color: #8a6d3b;
background: #fcf8e3;
}

这样我们就定义好了一个 mixin ，叫 alert ... 现在我们可以在任何地方去使用这个 mixin ... 常用的地方就是在其它的样式规则里面 ... 在下面，我们再定义一个样式 ... .alert-warning {} .... 在它里面，可以去调用上面定义的 mixin ... 调用 mixin 需要使用 @include 这个指令 ... 输入 @include .. 后面加上 mixin 的名字 ... alert ... 保存 ...

在右边，你会看到输出的结果 ... 你会发现，在 alert 这个 mixin 里面定义的样式，包含在了使用它的 .alert-warning 这个类的样式里面了 ...

在定义 mixin 的时候，可以使用 Sass 的其它特性，比如包含其它的 mixin ，或者使用嵌套等等 ... 我们可以再试一下 ... 在 alert 里面去使用一个嵌套 ... 用一个 a 标签作为样式的选择器 .. 在这块样式里，添加一个 color 属性 ... 设置一种颜色 ... 这个颜色可以比上面的 color 深一些 ... (command + shift + C)

保存 ... 在右边，你会看到输出的结果 ... Sass ，会把 mixin 里面使用的嵌套解包出来 ... 因为我们是在 .alert-warning 里面使用的这个 mixin ，所以，在解包的时候，会使用这个选择器作为 mixin 里面的 a 这个样式的父选择器 ..

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins