less学习（六）— 关于带参数的Mixin

Mixins can also take arguments, which are variables pass to the block of selectors when it is mixed in.（当使用混合时，可以通过选择器块带变量参数。）

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.box1 {
	background-color: #eee;
	.border-radius(10px);
}

Parametric mixins can also have default values for their parameters（带参数的混合也可以设置默认的参数）

.border-radius(@radius:10px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.box1 {
	background-color: #eee;
	.border-radius(5px);
}

对于带默认参数的混合，我们也可以像下面这种（不带括号）直接调用

.box1 {
	background-color: #eee;
	.border-radius;
}

You can also use parametric mixins which don't take parameters. This is useful if you want to hide the ruleset from the CSS output, but want to include its properties in other rulesets:（在使用参数混合模式时，也可以不带参数。这是在想要隐藏css的规则集输出，但是又需要在其他规则集里包含它的属性时非常有效的办法）

.box1() {
	color: red;
}
.box2 {
	.box1;
}

输出为：

.box2 {
  color: red;
}

Mixins With Multiple Parameters（多参数的混合）

Parameters are either semicolon or comma separated. It is recommended to use semicolon. The symbol comma has double meaning: it can be interpreted either as a mixin parameters separator or css list separator.（多参数可以使用分号或逗号来分离。推荐使用分号。逗号有两层意思：可以作为混合的多参数的分离器，也可以作为css集的分离器）

Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists:
1.two arguments and each contains comma separated list: .name(1, 2, 3; something, else),
2.three arguments and each contains one number: .name(1, 2, 3),
3.use dummy semicolon to create mixin call with one argument containing comma separated css list: .name(1, 2, 3;),
4.comma separated default value: .name(@param1: red, blue;).

翻译：

使用逗号作为混合的分离器可能会导致创建一个以逗号分隔的列表参数。另一方面，如果编译器在混合声明里检测到至少一个分号，那么它就会假设分离器是以分号分隔的，并且会把所有的逗号都作为css集合分离器：

1、两个都包含了以逗号作为分离的列表的参数：name:(1,2,3;something,else);

2、三个参数，每个都包含了一个数字：.name(1,2,3)；

3、使用一个没有实际意义的分号去创建混合的参数时，意味着这个参数时以逗号分隔的css集：.name(1,2,3;)；

4、逗号分离器有默认的值：.name(@param1:red,blue;)。

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:（定义多个有相同的名字和数量的参数的混合是合法的。less将会使用这些所有能应用的属性。如果使用只有一个参数的混合例如（.mixin(green);），那么，所有明确具有一个强制性参数（即只有一个没有默认值的参数）的混合的属性将会被使用）。

翻译的太渣了，下面用例子来说明

首先定义三个相同名字，并且包含相同参数的三个混合（注意：第一个混合没有默认值，第二个混合的第一个参数没有默认值，第二个参数有默认值，第三个混合的第一个和第二个参数没有默认值，第三个参数有默认值）

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

输出为：

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

因为在使用混合时，只传了一个参数，所以定义的第一个混合（只有一个参数，并且是强制性参数）的属性被使用，第二个混合（有两个参数，第一个参数没有默认值，是强制性参数，第二个参数有默认值，不是强制性参数。所以也属于只具有一个强制性参数的混合）的属性被使用，第三个混合（有三个参数，第一个和第二个参数都没有默认值，都是强制性参数，第三个参数有默认值，不是强制性参数，所以第三个混合属于有两个强制性参数的混合）的属性不被使用。
再看下面的例子（当给第三个混合的第二个参数加上默认值时，那么第三个混合也变成了只具有一个强制性参数的混合）

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

输出为：

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

结果很明显， 三个混合的属性都被使用了。

再看下面的例子（第二个混合的两个参数都没有默认值，那么第二个混合变成了有两个强制性参数的混合）

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding) {
  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);
}

输出为：

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

结果只有第一个混合的属性被使用了。

Named Parameters（命名参数）

A mixin reference can supply parameters values by their names instead of just positions. Any parameter can be referenced by its name and they do not have to be in any special order:（混合引用能通过参数的名字来提供参数值，而不是仅仅依靠参数位置。任何参数都能通过他们的名字而被引用，而不是必须通过任何特殊的顺序来引用）。

请看下面例子

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.box1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.box2 {
  .mixin(#efca44; @padding: 40px);
}

输出为：

/* line 17, http://localhost/about-less/styles.less */
.box1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
/* line 20, http://localhost/about-less/styles.less */
.box2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

注意：当定义混合时，把所有参数的默认值去掉后，如下使用，会有意外情况发生

.mixin(@color; @margin; @padding) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.box1 {
  .mixin(@margin: 20px; @color: #33acfe;20px;);
}
.box2 {
  .mixin(@margin: 40px;20px; #efca44);
}

输出为：

/* line 6, http://localhost/about-less/styles.less */
.box1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
/* line 9, http://localhost/about-less/styles.less */
.box2 {
  color: 20px;
  margin: 40px;
  padding: #efca44;
}

在box2中，color和padding的值是反的，所以，在不适用参数名的情况下，less还是会按照参数位置来提供参数值。

The @arguments variable（@arguments变量）

@arguments has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful if you don't want to deal with individual parameters（@arguments变量在混合里有一个特殊的意义，当混合被使用时，它将包含所有已通过的参数（合法的参数）。当想处理私有参数时这是非常有用的）

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

输出为：

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

Advanced arguments and the @rest variable（高级参数和@rest变量）

You can use ... if you want your mixin to take a variable number of arguments. Using this after a variable name will assign those arguments to the variable.（如果想要使混合有不确定数量的参数，那么可以使用...。在一个变量名后使用...将会分配那些参数给这个变量）

.mixin(...) //接受n个参数
.mixin() //接受0个参数
.mixin(@a:1) //接受1个参数
.mixin(@a:1;...) //接受n个参数
.mixin(@a;...) //接受1-n个参数

.mixin(@color;@rest...) {
	//@rest 表示@color之后的所有参数
	//@arguments 表示所有参数
}

Pattern-matching（匹配模式）

当如下定义混合时

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

然后再如下这样调用混合

@switch: light;

.class {
  .mixin(@switch; #888);
}

输出结果为：

.class {
  color: #a2a2a2;
  display: block;
}

也可以像下面这样定义混合

.mixin(@a) {
  color: @a;
}
.mixin(@a; @b) {
  color: fade(@a; @b);
}

当调用时，传一个参数就调用上面的mixin，传两个参数则调用下面的mixin