Less 混入参数

前面的 “Less 混入基础” 章节介绍了混入的基础用法，混入是支持带参数混入的，下面将详细介绍 Less 的混入参数。

参数基础

我们直接通过一个简单的例子来说明，下面例子定义了一个混入（.border-radius），并且接收一个参数（@radius），参数默认值为 5px：

// 如果不指定默认参数，语法：
// .border-radius(@radius) { ... }
.border-radius(@radius: 5px) {
 -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
         border-radius: @radius;
}

使用混入：

// 带参数引用混入
#header {
   .border-radius(4px);
}
.button {
   .border-radius(6px);
}

// 不带参数引用混入，使用混入的默认值
#header {
   .border-radius();
}
.button {
   .border-radius();
}

注意，如果你想从 CSS 输出中隐藏规则集（即混入），但又想将其属性包含在其他规则集中，可以这样做：

// .wrap() 换入自身是不会输出到 CSS 中的，除非引用混入
.wrap() {
 text-wrap: wrap;
 white-space: -moz-pre-wrap;
 white-space: pre-wrap;
 word-wrap: break-word;
}

// 引用混入
pre {
   .wrap()
}

less广告位

参数分隔符

Less 的参数当前以分号或逗号分隔。

最初，参数只用逗号分隔，但后来添加了分号以支持将逗号分隔的列表值传递给单个参数。

注意：从 Less 4.0 开始，你可以使用括号转义 [~()] 来封装列表值，例如 .name(@param1: ~(red, blue)) 这类似于引用转义语法：~"quote"，这可能会使你的代码库中不需要分号分隔符。

例子：

• 两个参数，每个参数都包含逗号分隔列表： .name(1, 2, 3; something, else)

• 三个参数，每个参数包含一个数字： .name(1, 2, 3)

• 使用虚拟分号创建一个 mixin 调用，其中一个参数包含一个逗号分隔的 css 列表：.name(1, 2, 3;)。

  注意：如果结尾的分号看起来很奇怪，你可能更喜欢： .name(~(1, 2, 3))

• 编写逗号分隔默认值的方法：

• @param-values: red, blue; .name(@param1: @param-values)

• .name(@param1: red, blue;)

• .name(@param1: ~(red, blue))

混入重载

定义多个具有相同名称和参数数量的混合是合法的。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);
}

编译 less，输出的 CSS 如下：

.some .selector div {
 // 来自 .mixin(@color)
 color-1: #008000;
 // 来自 .mixin(@color, @padding: 2)，因为 @padding 参数有默认值，调用合法
 color-2: #008000;
 padding-2: 2;
}

注意，.mixin(@color, @padding, @margin: 2) 不能被调用，因为 @padding 没有提供默认值，它是强制参数，引入时值传递了一个参数，不匹配。

命名参数

混入引用可以通过名称而不是位置来提供参数值。任何参数都可以通过其名称来引用，并且它们不必按任何特殊顺序排列：

// 定义混入，最大接收三个参数
.mixin(@color: black; @margin: 10px; @padding: 20px) {
 color: @color;
 margin: @margin;
 padding: @padding;
}

// 引入混入
.class1 {
 //
 .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
 // #efca44 将传递给 @color，按位置匹配
 // 40px 传递给 @padding，通过命名参数匹配
 .mixin(#efca44; @padding: 40px);
}

编译 less，输出的 CSS 如下：

.class1 {
 color: #33acfe;
 margin: 20px;
 padding: 20px;
}
.class2 {
 color: #efca44;
 margin: 10px;
 padding: 40px;
}

@arguments 变量

@arguments 变量在混入中有特殊含义，它包含调用混入时传递的所有参数。如果你不想单独处理每一个参数的话就可以像这样写：

// 定义一个混入，接收四个参数，参数均有默认值
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
   box-shadow: @arguments;
   -moz-box-shadow: @arguments;
   -webkit-box-shadow: @arguments;
}
// 调用混入，传递两个参数
#my {
   .box-shadow(2px, 5px);
}

编译 less，输出的 CSS 如下：

#my {
 box-shadow: 2px 5px 1px #000;
 -moz-box-shadow: 2px 5px 1px #000;
 -webkit-box-shadow: 2px 5px 1px #000;
}

可变参数和 @rest 变量

如果你希望你的混入可接受可变数量的参数，你可以使用 “...”（三个点）。在变量名之后使用它会将这些参数分配给变量：

.mixin(...) {        // 匹配 0-N 个参数
.mixin() {           // 匹配 0 个参数
.mixin(@a: 1) {      // 匹配 0-1 个参数
.mixin(@a: 1, ...) { // 匹配 0-N 个参数
.mixin(@a, ...) {    // 匹配 1-N 个参数

此外：

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