Less参数混合

jiezi

5 年前

参数可以使用逗号或分号分隔。（建议使用分号，因为逗号具有双重含义：可以将其解释为 mixin 参数分隔符或者是 css 列表分隔符）；使用逗号作为 mixin 分隔符使不可能创建逗号分隔的列表作为参数。
参数 mixin 使用一个或多个参数，通过参数和它的属性来扩展 Less 的功能，以达到在混合到另一个块时自定义 mixin 输出的效果。
如果编译器在 mixin 调用中或者是声明中看到至少一个分号，那么假设这个歌参数用分号分隔的话，并且所有逗号都属于 css 列表，我们可以有以下几种情况：
- 两个参数，每一个包含逗号分隔的列表：.name(1, 2, 3; something, else)
- 三个参数，并且每个包含一个数字：.name(1, 2, 3)
- 使用虚拟分号创建混入调用一个参数包含逗号分隔的 CSS 列表：.name(1, 2, 3;)
- 逗号分隔的默认值：.name(@param1: red, blue;)

mixin 引用时可以通过名称而不是位置来提供参数值，可以通过名称来引用任何参数任何参数都可以通过它的名称来引用，而不是特定的顺序。

    .mixin(@color: green; @font-size: 18px; @padding: 15px; @margin: 10px;) {
      color: @color;
      font-size: @font-size;
      padding: @padding;
      margin: @margin;
    }
    .name1 {.mixin( @color: blue; @margin: 20px;);
    }
    .name2 {.mixin(red; @padding: 30px; @font-size:40px;);
    }
    
    // 输出，改变后的值改变，没有重新赋值的值默认原值
    .name1 {
      color: blue;
      font-size: 18px;
      padding: 15px;
      margin: 20px;
    }
    .name2 {
      color: red;
      padding: 30px;
      font-size:40px;
      margin: 10px;
    }

@arguments 在 JavaScript 中代表所有的参数，在 mixin 内部同样有特殊含义，它包含调用 mixin 时传递的所有参数；如果我们不想处理单个参数，它将会非常适用。

    .box-shadow(@x: 0; @y: 0; @blur: 20px; @color: green) {
      -webkit-box-shadow: @arguments;
         -moz-box-shadow: @arguments;
              box-shadow: @arguments;
    }
    .argVar {.box-shadow(2px; 11px);
    }
    
    // 输出
    .argVar {
      -webkit-box-shadow: 2px 11px 20px green;
         -moz-box-shadow: 2px 11px 20px green;
              box-shadow: 2px 11px 20px green;
    }

... 如果您希望 mixin 接受可变数量的参数，则可以使用。在变量名之后使用此命令会将这些参数分配给变量。

    // 1: 匹配 0 - n 参数
    .mixin(...) {}
    // 2: 完全匹配 0 个参数
    .mixin() {}      
    // 3: 匹配 0 - 1 个参数
    .mixin(@a: 1) {}    
    // 4: 匹配 0 - n 参数
    .mixin(@a: 1; ...) {}  
    // 5: 匹配 1 - n 个参数
    .mixin(@a; ...) {}

通过将参数传递给它来改变 mixin 的行为。

Less参数混合

Mixins 具有多个参数

命名参数

@arguments 变量

高级参数和 @rest 变量

模式匹配