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！

【未完待续】