1

我正在阅读有关 LESS的手册，这里有以下示例：

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

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

4

2 回答 2

2

对上面漂亮的@Harry 答案的补充，只是同样的事情，但换句话说（我只是认为这种“紧凑”形式最适合像我这样的“技术人员”）：

  • .mixin(@color) {...}仅匹配传递了1 个.mixin参数的调用。
  • .mixin(@color; @padding: 2) {...}匹配.mixin带有1 个或2 个参数的调用。
  • .mixin(@color; @padding; @margin: 2) {...}匹配.mixin带有2 个或3 个参数的调用。

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

于 2014-08-16T02:13:45.270 回答
2

引用LESS手册：

定义多个具有相同名称和参数数量的 mixin 是合法的。Less 将使用所有可以应用的属性。如果您使用带有一个参数的 mixin，例如 .mixin(green);，那么将使用所有带有一个强制参数的 mixin 的属性

关键语句是Less 将使用所有可以应用的属性，然后将使用所有带有一个强制参数的 mixin 的属性。

在下面的示例中，输出包含在.mixinwith one 参数和.mixinwith two 参数中指定的属性，因为.mixinwith two 参数具有第二个参数的默认值（因此只需要一个强制参数）。

.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;
}
于 2014-08-15T13:06:15.023 回答