less在vue中的使用

首先安装过程就不说了，在vue中引入

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

开始使用
①less中变量的使用
在less中允许使用以变量的形式来定义
定义: @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}这种凡是吧变量引入以后才能生效。
③变量计算和嵌套

<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>

这里看起来是不是比原生js用 .box ul li a div...{xxx}这种写法清晰多了。

④函数

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

<style>
//定义函数
.test(@color:red,@size:14px){
background:@color;
font-size:@size;
}
.box1{
    //不传参
    .test()
}
.box2{
     .test(@color:green,@size:30px)
}
</style>

另外：
& 符号可以在嵌套的时候代替父元素的类名。如：

a{
　　color：blue；
　　&：hover{
　　　　color：red；
　　}
}
//再比如，父元素叫.wrap  儿子元素中有一个叫 .wrap_2，那就可以这样写
.wrap{
　　&_2{}
}