less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
-
普通混合:会被编译到CSS中
.center{ position: absolute; left: 0; top: 0; margin: auto; } #box1{ width: 100px; height: 50px; background: red; .center; } #box2{ width: 50px; height: 100px; background: orange; .center; }
-
不带输出的混合:不会被编译到CSS中
.center(){ position: absolute; left: 0; top: 0; margin: auto; } #box1{ width: 100px; height: 50px; background: red; .center; } #box2{ width: 50px; height: 100px; background: orange; .center; }
-
带参数的混合
.center(@w,@h,@c){ position: absolute; left: 0; top: 0; margin: auto; width: @w; height: @h; background: @c; } #box1{ .center(100px,50px,red); } #box2{ .center(50px,100px,orange); }
-
带参数并且有默认值的混合
.center(@w:200px,@h:100px,@c:blue){ position: absolute; left: 0; top: 0; margin: auto; width: @w; height: @h; background: @c; } #box1{ .center(); } #box2{ .center(50px,100px,orange); }
-
带多个参数的混合
-
命名参数
#box2{ // .center(orange); // 会被编译成 width: orange; .center(@c:orange); }
-
匹配模式
// triangle.less .triangle(@_,@w:10px,@c:pink){ width: 0; height: 0; overflow: hidden; } /*向上的三角*/ .triangle(top,@w:10px,@c:pink){ border-width:@w; border-color: transparent transparent @c transparent ; border-style:dashed dashed solid dashed ; } /*向下的三角*/ .triangle(bottom,@w:10px,@c:pink){ border-width:@w; border-color: @c transparent transparent transparent ; border-style:solid dashed dashed dashed ; } /*向左的三角*/ .triangle(left,@w:10px,@c:pink){ border-width:@w; border-color: transparent @c transparent transparent ; border-style: dashed solid dashed dashed ; } /*向右的三角*/ .triangle(right,@w:10px,@c:pink){ border-width:@w; border-color: transparent transparent transparent @c; border-style: dashed dashed dashed solid; }
#box1 { .triangle(right) } #box1 { .triangle(top,0,red) }
-
arguments变量
.border(@1,@2,@3) { border: @arguments; } .box { .border(1px,solid,black) }
less继承
性能比混合高
灵活度比混合低
.common:hover{
background: red;
}
.common{
position: absolute;
left: 0;
top: 0;
margin: auto;
}
.center(@w:100px,@h:100px,@c:pink){
&:extend(.common all);
width: @w;
height: @h;
background: @c;
}
备注:会将CSS代码编译成并集选择器的形式,后面的 all
可以将.common
后的编译出来(比如.common:hover
)
less避免编译
~"需要避免编译的数据"
// 例如
.box {
width:~"calc(200px + 700px)";
}