Sass混入(@mixin)

Sass是一种编译成 CSS 的样式表语言，具有完全与 CSS 兼容的语法，有助于保持大型样式表井井有条，并使在项目内部和项目之间共享设计变得容易

使用背景

CSS中的一些东西写起来有点乏味，尤其是CSS3 和存在的许多供应商前缀。一个 mixin 可以让你创建一组你想要在你的站点中重用的 CSS声明，它有助于保持你的 Sass 非常干燥，甚至可以传入值以使您的 mixin 更加灵活。

定义混入

混入通过@mixin类名 后面跟任选的 arguments 参数的方式定义一个 Mixins 模块，然后添加任何你想重复使用的样式

/* 不携带参数 */
@mixin public{
    width:50px;
    height:50px;
    background:red;
}
/* 引用 Mixins模块 */
div{
    @include public;
}

编译为CSS

div {
  width: 50px;
  height: 50px;
  background: red; 
}

以上便是一个非常简单的混入(Mixin)，你完全可以把混入看做一个函数(function)/模块(Mixins)，其中@include指令负责调用函数/模块

---

混入也还可以包含选择器和属性的混合体，选择器中甚至可以包含 parent references（父选择器）：

/* 混合体：选择器/嵌套属性/父选择器 */
@mixin public{
    &:hover{
        font:{
            family: '微软雅黑';
            size: 14px;
            weight: bold;  
        }
    }
    *{
        border-radius: 10px;
    }
}

/* 引用 Mixins模块 */
div{
    @include public;
}

编译为CSS：

div:hover {
  font-family: '微软雅黑';
  font-size: 14px;
  font-weight: bold; 
}

div * {
  border-radius: 10px; 
}

解释：在 public 模块中，首先使用了选择器(&)，接着使用嵌套属性语法，最后使用了父选择器(*)
总结：@mixin 能够包含任何在 CSS 和 Sass 中有效的内容！

包含其它的混入

可以通过以包含多种简单 @mixin 模块的方式创建较为复杂的 @mixin大模块。

/* 模块 1 */
@mixin demo-1{
    width:50px;
}

/* 模块 2 */
@mixin demo-2{
    height:50px;
}

/* 模块 3 */
@mixin demo-3{
    background:rgb(255,0,0)
}

/* 合并模块 => Big */
@mixin Big{
    @include demo-1;
    @include demo-2;
    @include demo-3;
}

/* 调用大模块 => Big */
div{
    @include Big;
}

编译为CSS：

div {
  width: 50px;
  height: 50px;
  background: red; 
}

注意： 混入也可以包含自己，该行为不同于 Sass 3.3 之前的版本，以前混入递归是被禁止的，只定义后代选择器的混入可以安全地混入到文件的最顶层。

这就像造汽车，当你把每个零件都做出来的时候，拼接过程不会很难。

混入在文档的根

混入(@mixin)可以包含在任何规则的外(即，在文档的根)，前提是它们不直接定义的任何属性或使用任何父选择器引用：

/* 模块 */
@mixin demo{
    div{
        width:50px;
        height:50px;
        background:rgb(255,255,0);
    }
}

/* 文档根调用 */
@include demo;

拿如上代码来谈，如果没有 div 套着这些属性规则，就中了上面加粗文字【不直接定义的任何属性】这条规则，肯定就会报错，如果你还不理解为什么报错，请看下面。【不能使用任何父选择器】很好理解，不再赘述

---

【不直接定义的任何属性】Error：

/* 模块 */
@mixin demo{
    width:50px;
    height:50px;
    background:rgb(255,255,0);
}

/* 文档根调用 */
@include demo;
// 报错

携带参数 (Arguments)

当定义一个混入(@mixin)的时候，参数被作为变量名，写到混入(@mixin)名字后面的括号内，多个参数可以用逗号分隔，当调用混入的时候，值通过对应的参数顺序被传递。

解释：混入(@mixin)可以用 SassScript 值作为参数，给定的参数被包括在混入(@mixin)中并且作为为变量提供给混入(@mixin)使用。

/* 携带参数 */
@mixin demo($width,$height,$bg){
    width:$width;
    height:$height;
    background:$bg;
}

/* 调用 */
div{
    @include demo(50px,50px,rgb(255,0,0));/*传值*/
}

编译为CSS：

div {
  width: 50px;
  height: 50px;
  background: red; 
}

这与函数的思想非常相似，且这种方式的样式复用方法非常的强大，具体使用场景想必你脑海中一定浮现了！

---

同样可以使用普通的变量赋值语法为参数指定默认值，当调用混入时如果没有给参数赋值，则自动会使用默认值代替：

/* 携带参数 */
@mixin demo($width,$height,$bg:rgb(255,0,0)){
    width:$width;
    height:$height;
    background:$bg;
}

/* 调用 */
div{
    @include demo(50px,50px);/*省略颜色,使用默认值*/
}

编译为CSS：

div {
  width: 50px;
  height: 50px;
  background: red; 
}

background 没有传参，即使用时默认为红色。

---

需要注意的是，传参顺序不正确会导致报错：

/* 传参顺序不正确会导致报错 */
@mixin demo($width:50px,$height:50px,$bg){
    width: $width;
    height: $height;
    background: $bg;
}

/* 宽高使用默认值 / 颜色传入新值 */
div{
    @include demo(rgb(255,255,255));
}

Error：Required argument $bg must come before any optional arguments.，也就是说，参数 $bg 必须在任何可选参数之前。

关键字参数(Keyword Arguments)

混入(@mixin)在 引入(@include) 的时候也可以使用明确的关键字参数，也就是说，你可以在传递值给mixin时将参数名称和参数值一并传递过去，请看下面这个例子：

/* 明确参数名称/参数值 */
@mixin demo($width,$height,$bg){
    width: $width;
    height: $height;
    background: $bg;
}

/* 调用 */
div{
    @include demo($width:20px,$height:20px,$bg:green)
}

可以观察到，这样做不够简明，但是它可以使样式表更容易阅读，它给函数呈现了更加灵活的接口，它使多参数的混入更加容易调用。

---

Sass允许参数的位置顺序是可变的：

/* 明确参数名称/参数值 */
@mixin demo($width,$height,$bg){
    width: $width;
    height: $height;
    background: $bg;
}

/* 调用 */
div{
    @include demo($bg:green,$height:20px,$width:20px)/*顺序反转*/
}

也就是说，命名的参数可以按任何顺序进行传递，有默认值的参数可以省略。

可变参数(Variable Arguments)

有时候，我们不能确定一个 混入(@mixin) 或一个 函数(function) 需要使用多少个参数，对于这种情况，Sass 给出了 “可变参数” ，参数在声明 混入(@mixin) 或 函数(function) 结束的地方，所有剩余的参数打包成一个 列表(list) ，参数看起来就像普通参数一样，但后面跟随着 " … "

简单来说，可变参数可以接收多个未知的数量的参数。
例如，用于创建盒子阴影(box-shadow)的一个混入(mixin)可以采取任何数量的 box-shadow 作为参数：

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译为CSS：

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

传递内容块到混入(Passing Content Blocks to a Mixin)

样式内容块可以传递到混入(@mixin)包含样式的位置，样式内容块将出现在混入内的任何 @content 指令的位置，这使得可以定义抽象与关联到选择器和指令的解析：

@mixin demo{
    @content;
}

@include demo{
    #div{
        padding:200px;
    }
}

编译为CSS：

#div {
  padding: 200px; 
}

注意： 当 @content 指令指定多次或在一个循环中指定的时候，样式块将在每次调用中被复制并引用。

变量的作用域和内容块(Variable Scope and Content Blocks)

传递给混入(@mixin)的内容块在其被定义的作用域中进行运算，而不是混入(@mixin)的作用域，这也就意味着混入(@mixin)的局部变量不能传递给样式块使用，并且变量将解析为全局值

$color: rgb(0,0,0);

@mixin colors($color: blue) {/* @include => 不再@mixin作用域中进行运算 */
  background-color: $color;
    @content;
  border-color: $color;
}

.colors {
  @include colors { color: $color; }
}

编译为CSS：

.colors {
  /* @include => 不再@mixin作用域中进行运算 */
  background-color: blue;
  color: black;
  border-color: blue; 
}

可以看到，color 为黑色，证明@include colors没有在@mixin中进行运算，否则颜色应该为 blue 才对。