Question

我在LESS上阅读a manual，这里有以下示例：

It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply. If you used the mixin with one parameter e.g. .mixin(green);, then properties of all mixins with exactly one mandatory parameter will be used:

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}

compiles into:

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

我似乎无法掌握选择属性背后的逻辑。有人可以解释一下吗？

Answer 1

引用LESS手册：

定义具有相同名称和参数数量的多个mixin是合法的。 Less将使用所有可应用的属性。如果你将mixin与一个参数一起使用，例如.mixin（绿色）;然后将使用具有一个必需参数的所有mixins的属性

主要陈述是 Less将使用所有的属性 和然后所有mixin的属性正好一个必需参数将被使用。

在下面的示例中，输出包含.mixin中一个参数指定的属性以及带有两个参数的.mixin 因为带有两个参数的.mixin具有第二个参数的默认值（因此只需要一个必需参数）。

.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}

因此，实质上，当在mixin调用语句中未指定第二个参数时，仍然可以应用规则/属性，因为将使用默认值。如果删除填充的默认值并使其如下所示，则当mixin调用只有一个参数时，它将不会应用。

.mixin(@color; @padding) {
  color-2: @color;
  padding-2: @padding;
}

同样，未应用带有三个参数的.mixin，因为mixin调用只有一个参数，并且只为一个其他参数指定了默认值。所以从本质上讲，我们只有两个带有值的参数。

.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

Answer 2

上面那个很好的@Harry答案的补充，只是同样的事情，但换句话说（我只是认为这个＆＃34;紧凑的＆＃34;形式对于一个＆＃34;技术员和＃34;家伙来说效果最好像我一样）：

.mixin(@color) {...}仅匹配.mixin次调用 1 参数。
.mixin(@color; @padding: 2) {...}使用 1 或 2 参数匹配.mixin次来电。
.mixin(@color; @padding; @margin: 2) {...}使用 2 或 3 参数匹配.mixin次来电。

示例中的.mixin(#008000);调用具有 1 参数，因此仅调用第一和第二个mixin定义（但不是第三个）。

mixins与多个参数 - 如何选择属性？

2 个答案: