首先安装过程就不说了，在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{}
}
