混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... }
以下实例创建一个名为 "important-text" 的混入：
@mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; }
使用@mixin代码段：@include 指令可用于包含一混入：
.danger { @include important-text; background-color: green; }
转换出的结果是：
.danger { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; background-color: green; }
这种使用方式也可以嵌套使用
@mixin special-text { @include important-text; @include link; @include special-border; }
混入可以接收参数。
我们可以向混入传递变量。
定义可以接收参数的混入：
/* 混入接收两个参数 */ @mixin bordered($color, $width) { border: $width solid $color; } .myArticle { @include bordered(blue, 1px); // 调用混入，并传递两个参数 } .myNotes { @include bordered(red, 2px); // 调用混入，并传递两个参数 }
这种方式类似于js函数的使用方式@mixin相当于function ，bordered像当于定义的函数名，然后接参数列表（value1,value2）
转化的代码
.myArticle { border: 1px solid blue; } .myNotes { border: 2px solid red; }
默认值使用就是在变量后面赋值，还是于函数像是，当传入的参数有值，使用传入的参数，没有的时候使用默认值
@mixin bordered($color: blue, $width: 1px) { border: $width solid $color; }
默认值是blue与1px
示例
@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）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。这就是参数值数量不定的时候的使用方式
@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);
}
结果是
.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; }
@mixin transform($property) { -webkit-transform: $property; -ms-transform: $property; transform: $property; } .myBox { @include transform(rotate(20deg)); }
结果
.myBox { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); }
结果如上，注意的是浏览器前缀所谓的方便其实还是自己手动输入，只不过因为代码复用的关系，可以省略很多的重复代码
原文：https://www.cnblogs.com/camellioil/p/14695060.html