less语法心得

1 Mix混合

1.1 设置通用属性集合作为一个样式类

这种方式通常适用于一些基础样式类，自身可以被单独使用，也可以作为其他样式类的一部分。示例：

.bordered {
  border: solid 1px #aeaeae;
}
input {
  padding: 5px;
  margin: 5px;
  .bordered;
}
button {
  padding: 5px 10px;
  margin: 5px;
  .bordered;
}

这样，可以最大可能的复用样式。

1.2 带参数混合样式集合

这种混合方式，类似于函数，自身不能作为独立的样式类使用，只在被调用的地方生效。示例：

@primaryCol: #51ca7a;
.border-radius (@radius: 5px) {
  border-radius: @radius;
}
.bg-color (@bgColor: #fff) {
  background-color: @bgColor;
}
.input {
  .border-radius;
  .bg-color;
}
.button {
  .border-radius(8px);
  .bg-color;
}

而且这种函数式混合方式，还可以设置默认参数值。这种混合方式特别适合我们需要个性化定制组件的皮肤，以便提供不同的可选方式，满足不同的业务场景。

1.3.1 @arguments 变量

提到函数式混合方式，不得不提到 @arguments 变量，类似于 ES5 的 arguments 哦，这样好多变量时就不需要一一书写啦。示例：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #efefef) {
  box-shadow: @arguments;
}
.box {
  padding: 10px 15px;
  margin: 20px;
  .bordered;
  .box-shadow(4px, 4px, 4px, #bebebe);
}

1.3 模式匹配混合方式

这种方式是对 1.2 方式的一种扩展。1.2 中参数都是变量，而这里的模式匹配则是将某些变量固定下来，即将变量变为常量。换就话说，就是只有当参数是对应的常量才能匹配对应模式。如下：

@dft: 'dft';
@fill: 'fill';
@dftCol: #fff;
@warnCol: #f78253;
.button-theme('dft') {
  .bg-color(@dftCol);
  color: darken(@dftCol, 60%);
}
.button-theme('dft', @color) {
  .bg-color(@dftCol);
  color: @color;
}
.button-theme('fill', @bgColor) {
  .bg-color(@bgColor);
  color: lighten(@bgColor, 60%); 
}
.button-theme(@_, @color) {
  border-color: @color;
}

.input.active {
  .button-theme(@fill, @primaryCol);
}
.button.active {
  .button-theme(@fill, @primaryCol);
}
.button-default {
  .button-theme(@dft);
}
.button-primary {
  .button-theme(@dft, @primaryCol);
  &.fill {
    .button-theme(@fill, @primaryCol);
  }
}
.button-warn {
  .button-theme(@dft, @warnCol);
  &.fill {
    .button-theme(@fill, @warnCol);
  }
}

上面我们定义了四种 .button-theme 模式：

• 第一种只有一个参数，且是一个常量 dft ，使用默认的背景和字体颜色；
• 第二种模式是增强第一种模式，第一个参数是常量 dft ，使用第二个参数来变更字体颜色，但背景仍是默认背景；
• 第三种模式是填充模式，第一个参数是常量 fill ，使用第二个参数来变更背景颜色，同时字体颜色使用函数 lighten 进行对应设置；
• 第四种模式是补充模式，第一个参数接收任意参数，使用第二个参数来设置边框的颜色；

因此，.button-default 中，样式 .button-theme(@dft); 只有一个参数，将只会匹配第一种模式；.button-primary 中，样式 .button-theme(@dft, @primaryCol); 有两个参数，将会匹配第二种模式和第四种模式；.button-primary.fill 中，样式 .button-theme(@fill, @primaryCol); 将会匹配第三种模式和第四种模式。最终渲染结果是：

.button-default {
  background-color: #fff;
  color: #666666;
}
.button-primary {
  background-color: #fff;
  color: #51ca7a;
  border-color: #51ca7a;
}
.button-primary.fill {
  background-color: #51ca7a;
  color: #ffffff;
  border-color: #51ca7a;
}

下图为上述代码的实例，代码详情及效果，请戳这里 less-mix！

【未完待续】