1

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

图片描述

【未完待续】


xuweijian
143 声望15 粉丝

一路走来,不管风雨!


引用和评论

0 条评论