多个参数mixin
调用时可直接传入值,如@include传入参数的个数小于@mixin定义参数的个数,则按照顺序表示,后面不足的使用默认值,如不足的没有默认值则报错。
除此之外还可以选择性的传入参数,使用参数名与值同时传入。
sass style示例:
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
在混合宏“horizontal-line”就传了多个参数。在实际调用和其调用其他混合宏是一样的:
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
@include horizontal-line($padding:15px);
}
最终编译的CSS
.imgtext-h li {
border-bottom: 1px solid #cccccc;
padding-top: 10px;
padding-bottom: 10px;
}
.imgtext-h--product li {
border-bottom: 1px dashed #cccccc;
padding-top: 15px;
padding-bottom: 15px;
}
请用Sass语法编译,声明一个混合boxSize,有两个参数高度和宽度,在.box中调用此混合并为赋值宽度100px,高度200px。编译生成的css为
.box {
width: 100px;
height: 200px;
}