less语法简介

1.基础变量定义(HBuilder)

.div{
    background: #aaa;
    @size:40px;
  .span{
      background: #ccc;
      font-size: @size;
  } 
}

2.作为选择器和属性名的变量

@kuaidu:width;
.@{kuaidu}{
    @{kuaidu}:150px
}

3.字符串

@url:"https://www.baidu.com/img/";             
.@{kuaidu}{                                    
    @{kuaidu}:1000px;                          
    background:#CCCCCC url("@{url}bdlogo.png");
}                                              

4.重复定义相同变量名覆盖。（惰性加载，就近原则----当前作用域向上搜索）

（二）混合minxins（规则集）

h1{
    font-size: 18px;
    color: #ccc;
    font-family: "microsoft yahei";
    .font-bac;
}               
h2{
    font-size: 30px;
    color: lightcoral;
     .font-bac;
}   
.font-bac{
    background: lightgreen;
}      

2.不输出的样式集(添加（）)

.font-bac(){
    background: lightgreen;
} 

3.带选择器的混合(&:父级)

.hover{
    &:hover{
        border: 1px solid #F08080;
    }
}   
button{
    .hover()
} 

4.带参数混合

.hover(@color){
    &:hover{
        border: 1px solid @color;
    }
}   
button{
    .hover(@color)
} 

5.带参数并且有默认值

.hover(@color:#ccc){
    &:hover{
        border: 1px solid @color;
    }
}   
button{
    .hover()
}         

6带多个参数的混合(推荐使用；)

image.png

多个同名集合不会覆盖，而是取合集

.hover(@color:#ccc;@pading:20px 30px 20px 40px){
    &:hover{
        border: 1px solid @color;
        padding: @pading;
    }
}   
button{
    .hover()
} 

7.命名参数(根据名字而不是位置)
@arguments代表所有参数

.hover(@color:#ccc;@pading:20px 30px 20px 40px){
    &:hover{
        border: 1px solid @color;
        padding: @pading;
    }
}   
button{
    .hover(@pading:40px)
}

8.匹配模式

button{
    .hover(@pading:40px);
    background: @color;
    .border(t-l)
}
.border(all,@kuaidu:5px){
    border-radius: @kuaidu;
} 
.border(t-l,@kuaidu:5px){
    border-top-left-radius: @kuaidu;
} 

9.混合中的运算

.average(@x,@y){
    @average:((@x+@y)/2);
}   
button{
    .hover(@pading:40px);
    background: @color;
    .border(t-l);
    .average(30px;60px);
    height: @average;
}