3

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

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

我们也可以在 arity 上进行匹配，这里有一个例子：

.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

现在如果我们用一个参数调用 .mixin，我们将得到第一个定义的输出，但是如果我们用两个参数调用它，我们将得到第二个定义，即 @a 淡化为 @b。

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

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

更少的混合

.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 （参数的数量）。相反，使用单个参数调用似乎会同时运行两个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;
}

我究竟做错了什么？

4

2 回答 2

3

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

以下工作符合您的预期：

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

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

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

所以最后你可以使用（现在你可以放心地省略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;
}
于 2013-03-07T08:50:45.170 回答
0

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

.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;
}
于 2015-01-12T13:59:27.410 回答