less学习笔记五

一、带参数的混合类

混合类的参数是选择器调用时传入的变量

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.section{
    border:1px solid #ddd;
    .border-radius(5px;)
}
.quote{
    border:1px solid #ddd;
    .border-radius(6px;)
}

/**outputs**/
.section {
  border: 1px solid #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.quote {
  border: 1px solid #ddd;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
//设默认值
.border-radius(@radius: 5px) { 
　　-webkit-border-radius: @radius; 
　　-moz-border-radius: @radius; 
　　border-radius: @radius; 
}
.section { .border-radius; }

无论是否有参数，输出的结果中不包含混合类的声明数据。

Mixins with Multiple Parameters，多参数混合类

参数可以使用分号;或者逗号,做间隔。建议使用分号，因为逗号有两重含义，它可被解析为一个混合类参数分隔符，也可以解析为css列表分隔符。

使用逗号分隔符会导致以逗号分隔的css列表无法作为一个混合类参数，另一方面，如果混合类的调用或者声明中含有多个分号，编译器会将分号作为混合类的参数，将所有逗号作为css列表。

• 两个参数每个都包含逗号分隔列表：.name(1, 2, 3; something, else)
• 三个参数每个都包含一个数字：.name(1, 2, 3)
• 使用假分号来创建混合类调用，有一个参数，且参数中有逗号分隔的css列表：.name(1, 2, 3;)
• 逗号分隔默认值.name(@param1: red, blue;)

.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;
}
.section {
  .mixin(#008000);
}

/**outputs**/
.section {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

Named Parameters,通过名称传参数

调用混合类时，不止可以通过参数位置传参，也可以通过参数名传参。每个参数都可以通过它的名称来引用，而不必按照特殊的顺序。

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

/**outputs**/
.section {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.quote {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

The @arguments Variable，@arguments变量

@arguments在混合类中有特殊的含义，它包含混合类被调用时传进来的所有参数。当你不想一个一个处理参数时，这种写法是非常有用的。

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

/**outputs**/
.section {
  -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变量

如果混合类能接收的参数数量是可变的，你可以使用省略号...在变量名后使用省略号能将那些参数分配给变量。

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

/**实例测试**/
.rest(@a;@rest){
    font-size:30px;
    color:@a;
    float:@rest;
}
.section{
    .rest(#ddd;right;)
}
/**outputs**/
.section {
  font-size: 30px;
  color: #ddd;
  float: right;
}

Pattern-matching,模式匹配

当需要根据传入的参数来改变混合类的行为时，模式匹配能实现这种功能。

/**基本写法**/
.mixin(@s; @color) { ... }

.class {
  .mixin(@switch; #888);
}
/**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); }
/**outputs**/
.class { color: #a2a2a2; display: block; }

解析：第一个定义的mixin不匹配，它要求dark做第一个参数；

　　　第二个定义的mixin匹配，它要求light做第一个参数，而switch的值时light；

 　　　第三个定义的mixin匹配，第一个参数可以为任意值。

只有匹配的混合类才会被使用，变量匹配绑定到任意值。