混合

對於同一個頁面元素：

<div class='box'></div>

在Less檔案中設定box的寬度：

@test_width:300px;
.box{
    width:@test_width;
}

此時若還要給div這個元素加一個border的樣式，

.border{
    border:soild 5p pink;
}

原來是：

<div class='box border'></div>

現在就可以：

<div class='box'></div>
.box{
    width:@test_width;
    .border
}
 

編譯以後的.box為：

.box{
    width:300px;
    border:soild 5p pink
}

樣式混合帶引數

假設有一個border需要在不同的樣式中需求不同

先寫一個關於border的函式：

.border_function(@border_width){
    border:pink soild @border_width;
}

在使用的時候，需要傳入一個border的寬度

.test_border{
    .border_function(20px);
}

Less編譯後的結果為：

.test_border{
    border:pink soild 20px;
}

注意：此時必須要傳入border_width，否則會報錯

樣式混合帶一個預設值
先寫一個關於border的函式：

.border_function_default(@border_width:20px){
    border:solid pink @border_width;
}

在使用的時候，可以傳入一個border_width或者不傳，
當不傳的時候，border_width預設就是20px；

.test_border_deafult{
    .border_function_default();
}
 

Less編譯的結果為：

.test_border_deafult{
    border:solid pink 20px;
}

當傳入引數的時候，border_width就根據這個傳入的值進行相應的改變

.test_border_deafult{
    .border_function_default(50px);
}

Less編譯的結果為：

.test_border_deafult{
    border:solid pink 50px;
}