标签：ref special 调用 默认 form red div 式表 span
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。
混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... }
@mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; }
@include 指令可用于包含一混入：selector {@include mixin-name;}
.danger { @include important-text; background-color: green; }
css代码：
.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); // 调用混入，并传递两个参数 }
css代码如下：
.myArticle {
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
在包含混入时，你只需要传递需要的变量名及其值：
@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); }
css代码如下：
p { border-color: blue; border-width: 1in; border-style: dashed; } h1 { border-color: blue; border-width: 2in; border-style: dashed; }
有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。
例如，用于创建盒子阴影（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; }
@mixin transform($property) { -webkit-transform: $property; -ms-transform: $property; transform: $property; } .myBox { @include transform(rotate(20deg)); }
css代码：
.myBox { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); }
参考---https://www.runoob.com/sass/sass-mixin-include.html
标签：ref special 调用 默认 form red div 式表 span
原文地址：https://www.cnblogs.com/pwindy/p/14817163.html
