少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 is bound to arguments after @a
// @arguments is bound to all arguments }

我正在学习 Less 因为我非常热衷于 bootstrap ，但这让我感到困惑。

非常感谢!

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，如 .mixin(@a; ...)是前两个用例的变体。这个 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变量可以在任何混合中使用并且不需要 ...争论。

What would a caller for a mixin like this look like? .mixin(@a; ...) could it be something like this: .mixin(@a,53px); ? How does it determine where the 53px goes to?

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