Question

我正在使用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 （参数个数）。相反，似乎使用单个参数调用两者 mixins，而使用多个参数调用时，单独运行正确的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;
}

我做错了什么？

Answer 1

你必须省略参数的默认值，否则即使只提供一个参数，也会调用第二个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;
}

Answer 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;
}

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

2 个答案: