少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 ...){//在@a
// @arguments绑定到所有参数后@rest绑定到参数}

我正在学习Less因为我非常热衷于引导,但这让我很困惑.

非常感谢你!

Answer 1

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

在 Less 中，仅编译与调用者参数数量匹配的 mixin。还要注意，当两个或多个 mixins 匹配时，它们都会被编译成 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;
}

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

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

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