1.基礎(chǔ)變量定義(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.重復(fù)定義相同變量名覆蓋。（惰性加載，就近原則----當(dāng)前作用域向上搜索）

（二）混合minxins（規(guī)則集）

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.帶參數(shù)混合

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

5.帶參數(shù)并且有默認(rèn)值

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

6帶多個參數(shù)的混合(推薦使用；)

image.png

多個同名集合不會覆蓋，而是取合集

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

7.命名參數(shù)(根據(jù)名字而不是位置)
@arguments代表所有參數(shù)

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