今天小编跟大家讲解下有关Sass 混合 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关Sass 混合 的相关资料，希望小伙伴们看了有所帮助。
混合指令（Mixin）用于定义可以重复使用的样式，避免了使用无语意的 class。它可以包含所有的 css 规则，绝大部分 Sass 规则，甚至通过功能引入变量，输出多样化的样式。
[email protected] 。
混合也需要包含选择器和属性，甚至可以用&引用父选择器。
// 正常定义使用 @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } // 用 & 引用父选择器 @mixin clearfix { display: inline-block; &:after { content:"."; display: block; height: 0; clear: both; visibility: hidden; } * html & { height: 1px } [email protected][email protected]（include）mixin。
[email protected]，格式是在其后添加混合名称，以及需要的参数（可选）。
// html 代码 <h1>Hello Xkd！</h1> <p class="include"> [email protected] </p> // .scss 语法 @mixin important-text { color: green; font-size: 30px; font-weight: bold; border: 1px solid red; } .include { @include: important-text; background: blue; } // 编译后的 css .include{ color: green; font-size: 30px; font-weight: bold; background: blue; border: 1px solid red; }参数参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。
关于参数我们可以从下面几个点去了解：
按照参数顺序给变量赋值
关键词参数 使用关键词参数我们可以打乱顺序，如果使用默认值也可以省缺，另外，参数名也被视为变量名，下划线、短横线可以互换使用。
参数变量 有的时候我们不能确定混合指令使用参数的个数，这种时候我们就需要使用参数变量 ··· 来进行声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理，参数变量也可以用在混合指令的时候（@include）。
// 用两个参数定义mixin @mixin shadow($topWidth, $color) { box-shadow: $topWidth 2px 3px 4px $color; } // 用两个值调用mixin .one { @include shadow(11px, green); } .two { @include shadow(7px, #fafafa); } // 编译后的 css .one{ box-shadow: 11px 2px 3px 4px green; } .two{ box-shadow:7px 2px 3px 4px #fafafa; }向混合样式中导入内容在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，[email protected] 。
// .scss 语法 @mixin mix-to-write { * html { @content; } } @include mix-to-write { #logo { background-image: url(/logo.png); } } // 编译成 .css * html #logo { background-image: url(/logo.png); }为便于书写，@mixin可以用=表示，[email protected]+表示，上面的代码我们可以这样稍作修改：
=mix-to-write * html @content +mix-to-write #logo background-image: url(/logo.png)Mixin 的默认值为mixin变量定义默认值：
@mixin shadow($color: blue, $width: 1px) { border: $width solid $color; }比如上面的默认边框颜色是blue，如果我们要更改的话，只需要指定包含mixin的值去更改就可以了：
.three { @include shadow($color: green); }来源：爱蒂网
