Sass 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

多个参数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; }