根据参数数量调用正确的重载 mixin答案

【问题标题】：Call the correct overloaded mixin based on number of arguments根据参数数量调用正确的重载 mixin
【发布时间】：2015-01-12 21:59:27
【问题描述】：

我正在使用Mindscape Web Workbench (pro) 从 LESS 文件中生成一些 CSS。我有两个名称相同但参数数量不同的 mixin。

根据LESS docs，应该根据调用中的参数数量自动选择正确的mixin。以下是文档中的相关部分：

我们也可以在 arity 上进行匹配，这里有一个例子：
.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}
现在，如果我们使用单个参数调用 .mixin，我们将获得输出第一个定义，但如果我们用两个参数调用它，我们将得到第二个定义，即@a 淡化为@b。

然而，这对我来说似乎并非如此。

下面是.border-radius mixin 的两个版本。第一个接受一个参数，第二个允许发送一组自定义参数。 #searchbox 类调用单参数 mixin，#search 类调用多参数 mixin。

LESS Mixins

.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.border-radius (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
    -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
    -moz-border-radius: @topleft @topright @bottomright @bottomleft;
    border-radius: @topleft @topright @bottomright @bottomleft;
}

#searchbox {
    .border-radius(1px);
}

#search {
    .border-radius(2px, 3px, 4px, 5px);
}

生成的 CSS 不考虑 Arity（参数的数量）。相反，使用单个参数调用似乎会运行 both mixin，而使用多个参数调用会单独运行正确的 mixin，如下面生成的 CSS 所示：

生成的 CSS

#searchbox {
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;

  -webkit-border-radius: 1px 5px 5px 5px;
  -moz-border-radius: 1px 5px 5px 5px;
  border-radius: 1px 5px 5px 5px;
}

#search {
  -webkit-border-radius: 2px 3px 5px 4px;
  -moz-border-radius: 2px 3px 5px 4px;
  border-radius: 2px 3px 5px 4px;
}

我做错了什么？

【问题讨论】：

标签： css less

【解决方案1】：

你必须省略参数的默认值，否则即使只提供一个参数，less 也会调用第二个 mixin，因为它可以使用 3 个“缺失”参数的默认值。

以下工作符合您的预期：

.border-radius (@topleft, @topright, @bottomleft, @bottomright) {
    /*...*/
}

但是，现在当您尝试使用 2 或 3 个参数调用 .border-radius 时会出现错误。您可以为第三个和第四个值提供默认值，让 mixin 期望每个参数数量 (1-4)，但仍然不会只为一个参数执行第二个 mixin。

.border-radius (@topleft, @topright, @bottomleft:5px, @bottomright:5px) {
    /*...*/
}

所以最后你可以使用（现在你可以safely omit the prefixes for borderadius）：

/* 1 arg */
.border-radius (@radius: 5px) {
    border-radius: @radius;
}
/* 2 args */
.border-radius (@tlbr,@trbl) {
    border-radius:@tlbr,@trbl;
}
/* 3 and 4 args */
.border-radius (@topleft, @topright, @bottomleft, @bottomright: 5px) {
    border-radius: @topleft @topright @bottomright @bottomleft;
}

【讨论】：

完美答案。我在踢自己。谢谢。

【解决方案2】：

分别有 1 个参数和 4 个参数的两个函数就足够了。即：

.border-radius(@radius:0px) {
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}
.border-radius(@topLeftRadius, @topRightRadius, @bottomLeftRadius:0px, @bottomRightRadius:0px) {
    -webkit-border-radius:@topLeftRadius @topRightRadius @bottomLeftRadius @bottomRightRadius;
    -moz-border-radius:@topLeftRadius @topRightRadius @bottomLeftRadius @bottomRightRadius;
    border-radius:@topLeftRadius @topRightRadius @bottomLeftRadius @bottomRightRadius;
}

【讨论】：