首先安裝過(guò)程就不說(shuō)了，在vue中引入

import less from 'less'
Vue.use(less)

開(kāi)始使用
①less中變量的使用
在less中允許使用以變量的形式來(lái)定義
定義: @k:v
使用: @k

<div class="box"></div>
<style lang="less">
 @color:red;
@k:100px;
.box{
width:@k;
height:@k;
background:@color;
}
</style>

②字符串憑借變量使用方式

<div class="box"></div>
<style lang="less" scoped>
@img:'./img/';
@k:100px;
.box{
width:@K;
height:@k;
background:url("@{img}1.png")
}
</style>

注意：路徑要加上""，@{img}這種凡是吧變量引入以后才能生效。
③變量計(jì)算和嵌套

<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<style>
@k:100px;
.box1{
width:@k;
height:@k;
background:red;
    .box2{
        width:@k/2;
        height:@k/2;
        background:green;
        .box3{
            width:@k/3;
            height:@k/3;
        }
    }
}
</style>

這里看起來(lái)是不是比原生js用 .box ul li a div...{xxx}這種寫(xiě)法清晰多了。

④函數(shù)

<div class="box1">box1</div>
<div class="box2">box2</div>

<style>
//定義函數(shù)
.test(@color:red,@size:14px){
background:@color;
font-size:@size;
}
.box1{
    //不傳參
    .test()
}
.box2{
     .test(@color:green,@size:30px)
}
</style>

另外：
& 符號(hào)可以在嵌套的時(shí)候代替父元素的類(lèi)名。如：

a{
　　color：blue；
　　&：hover{
　　　　color：red；
　　}
}
//再比如，父元素叫.wrap  兒子元素中有一個(gè)叫 .wrap_2，那就可以這樣寫(xiě)
.wrap{
　　&_2{}
}