Less的常见用法

//声明初始化变量
@xs:200px;
//使用上面的变量
.box1{
    width:@xs;
    height:@xs;
    margin-top: 10px;
    background: red;
}
//此时.box1是一个混合,可以如下使用
.box2{
    .box1;
}
//预设一个混合
.class1{
   margin-top: 10px;
   border:1px solid deeppink;
}
//使用变量和刚预设的混合
.box3{
    width: @xs;
    height: @xs;
    .class1;
}
//变量的运算
.box4{
    width: @xs+@xs;
    height: @xs*1.5;
    .class1;
}
//带参数的混合
.jh1(@dd,@color1,@color2){
    background: -webkit-linear-gradient(@dd,@color1,@color2);
    background: -moz-linear-gradient(@dd,@color1,@color2);
    background: -ms-linear-gradient(@dd,@color1,@color2);
    background: -o-linear-gradient(@dd,@color1,@color2);
    background: linear-gradient(@dd,@color1,@color2);
}
.box5{
    width:@xs;
    height:@xs;
    .jh1(50deg,red,pink);
}
//带默认值参数的混合
.jh2(@color1,@color2,@dd:180deg){
    background: -webkit-linear-gradient(@dd,@color1,@color2);
    background: -moz-linear-gradient(@dd,@color1,@color2);
    background: -ms-linear-gradient(@dd,@color1,@color2);
    background: -o-linear-gradient(@dd,@color1,@color2);
    background: linear-gradient(@dd,@color1,@color2);
}
.box6{
    margin-top: 10px;
    width:@xs;
    height:@xs;
    .jh2(red,pink);
}
//匹配模式
.sanjiao(top,@wd:10px,@st:solid,@col:red){
    width: 0;
    height: 0;
    overflow: hidden;
    border-width:@wd;
    border-color: transparent transparent @col transparent; 
    border-style: dashed dashed @st dashed;
}
.sanjiao(bottom,@wd:10px,@st:solid,@col:red){
    width: 0;
    height: 0;
    overflow: hidden;
    border-width:@wd;
    border-color: @col transparent transparent transparent; 
    border-style: @st dashed dashed  dashed;
}
.box7{
    .sanjiao(top);
}
.box8{
    .sanjiao(bottom);
}
//匹配模式的共享属性标识@_
.sanjiao(top,@wd:10px,@st:solid,@col:red){  
    border-width:@wd;
    border-color: transparent transparent @col transparent; 
    border-style: dashed dashed @st dashed;
}
.sanjiao(bottom,@wd:10px,@st:solid,@col:red){
    border-width:@wd;
    border-color: @col transparent transparent transparent; 
    border-style: @st dashed dashed  dashed;
}
.sanjiao(@_,@wd:10px,@st:solid,@col:red){
    width: 0;
    height: 0;
    overflow: hidden;
}
.box9{
    .sanjiao(top);
} 
.box10{
    .sanjiao(bottom);
} 
//嵌套规则:
//相当于ul{}
//相当于ul li{}
//相当于ul li a{} 
ul{
    
    li{
        
        a{
            
        }
    }
}
//&符号的用法:
//代表上一级选择器 常用来搭配伪类选择器
ul{
    
    li{
        
        a{
            
          &:hover{
              
          }  
        }
    }
}
//@arguments的用法
.border(@wd:1px,@st:solid,@col:blue){
    border:@arguments;
}
#box{
    width: @xs;
    height: @xs;
    .border();
}