Less 中的混合、避免编译以及继承

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

1. 普通混合：会被编译到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;
   }
   

2. 不带输出的混合：不会被编译到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;
   }
   

3. 带参数的混合

   .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);
   }
   

4. 带参数并且有默认值的混合

   .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);
   }
   
   

5. 带多个参数的混合

6. 命名参数

   #box2{
   	// .center(orange); // 会被编译成 width: orange;
   	.center(@c:orange);
   }
   

7. 匹配模式

   // 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)
   }
   

8. 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)";
}