少 CSS，请向我解释高级参数和 @rest 变量？

Question

简单的问题：根据http://lesscss.org/features/#mixins-parametric-feature-advanced-arguments-and-the-rest-variable，我不明白高级参数在 Less CSS 中的作用。我一直在努力弄清楚那里是如何解释的。

我明白了：

.mixin(@a: 1) {

但是下面两个我没看懂，在哪里引入...：

.mixin(...) {        // matches 0-N arguments
.mixin() {           // matches exactly 0 arguments
.mixin(@a: 1) {      // matches 0-1 arguments
.mixin(@a: 1; ...) { // matches 0-N arguments
.mixin(@a; ...) {    // matches 1-N arguments

.mixin(@a; @rest...) { // @rest 绑定到 @a 之后的参数
// @arguments 绑定到所有参数 }

我学的少，因为我非常热衷于引导程序，但这让我感到困惑。

非常感谢！

Answer 1

好吧，好吧，你也应该阅读http://lesscss.org/features/#mixins-parametric-feature-pattern-matching。

在 Less 中，只有匹配调用者参数数量的 mixin 才会被编译。另请注意，当两个或多个 mixin 匹配时，它们都会被编译成 CSS。

当你 mixin 得到一个参数时，如下所示：

.mixin(@a) {}

只有一个参数的调用者匹配并被编译：.mixin(3); or .mixin(1) 等等。但不是.mixin() 或.mixin(1,2,3)

当为第一个参数设置默认值时，例如3，如下图：

.mixin(@a: 3) {}

现在不仅调用匹配 1 个参数，还调用零参数：

.mixin(@a: 3) {property: @a;}
p{ .mixin();}

输出：

p {
  property: 3;
}

现在看看特殊的... 参数，该参数匹配任意数量的参数。所以.mixin(...) 将匹配并编译以下调用者.mixin()、.mixin(1) 和.mixin(1,2,3,4)。

当您将名称（包括 @）添加到 ... 参数时，值将分配给具有该名称的变量：

.mixin(@listofvariables...) {
p: @listofvariables;
}
p {
.mixin(one; two; three);
}

输出：

p {
  p: one two three;
}

请注意，... 将参数分配给一个列表，该列表也可以使用 list functions 进行操作。

诸如.mixin(@a; ...) 之类的mixin 是前两个用例的变体。此 mixins 需要第一个参数集，后跟零个参数或任何其他参数。

@arguments 是一个特殊变量，其中包含 mixin 的所有参数的列表：

.mixin(@a; @b) {p1: @arguments; p2:extract(@arguments,2); p3:@b;}
p {.mixin(1; 2);}

输出：

p {
  p1: 1 2;
  p2: 2;
  p3: 2;
}

所以@arguments 变量可以在任何mixin 中使用，并且不需要... 参数。

像这样的 mixin 的调用者会是什么样子？ .mixin(@a; ...) 会不会是这样的：.mixin(@a,53px); ?怎么做的 确定 53px 去哪里？

53px 没有分配给变量，但它是@arguments 列表的第二项。您可以通过extract(@arguments,2)获取。

.mixin(@a; ...) {} 的一个用例可以是始终在 .mixin() 时分配属性，无论参数数量如何，例如：

.mixin(@a; ...) { color: @a;}
.mixin(@a) { background-color: contrast(@a); width:100%;}
.mixin(@a; @b;) { background-color: contrast(@a); width:@b;}
div {
.mixin(red);
}
div.small {
.mixin(red,50%);
}

输出：

div {
  color: red;
  background-color: #ffffff;
  width: 100%;
}
div.small {
  color: red;
  background-color: #ffffff;
  width: 50%;
}

注意.mixin(@a; @rest...) {} 将35px 分配给@rest 列表的第一项。所以下面的Less代码：

.mixin(@color,@padding...) { 
  color: @color; 
  padding: @padding 
}
div {
.mixin(red; 10px; 20px; 5px; 5px);
}

输出：

div {
  color: red;
  padding: 10px 20px 5px 5px;
}