如何为包含多个参数的Sass mixin创建别名？

我们可以利用Sass的可变参数透传特性，无需重复声明所有参数即可完成mixin别名创建，完全符合DRY原则。

实现原理 #

Sass支持使用...语法接收任意数量的参数并打包为参数列表，调用原始mixin时再用同样的语法展开参数列表透传所有参数，无论是必选参数还是可选参数都能正确识别，不会丢失原始mixin的默认值配置。

代码实现 #

原始mixin定义 #

@mixin box(
    $width,
    $height,
    $background-color: transparent
) {
    width: $width;
    height: $height;
    background-color: $background-color;
}

别名实现（无需重复罗列参数） #

@mixin box_alias($args...) {
    @include box($args...);
}

使用验证 #

别名完全继承原始mixin的参数规则，位置传参、具名传参、可选参数默认值都能正常生效：

// 仅传必选参数，背景色默认取transparent
.test1 {
    @include box_alias(100px, 200px);
}

// 传全量参数，自定义背景色
.test2 {
    @include box_alias(50px, 50px, #f00);
}

// 具名传参也完全支持
.test3 {
    @include box_alias(200px, 200px, $background-color: #0f0);
}

内容的提问来源于stack exchange，提问作者JHoffmann