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!
【未完待续】
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。