Vue2安装引入使用Less

安装

npm install less --save
npm install less-loader@6.1.0 --save

不指定安装less-loader的版本，默认下载最新版本，往往不兼容，导致出错哦~

引入

在 main.js 文件中

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

简单使用

<style lang="scss" scoped>
  ...
</style>

1、变量名 @

@color: pink;
@line-height: 50px;
.item-name {
  height: @line-height;
  line-height: @line-height;
  background: @color;
}

2、字符串拼接变量

    @img:'./img/';
    @height:100px;
    .box1{
        height:@height;
        background:url("@{img}1.png")
    }

3、多层嵌套+计算运算

@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;
		        background: blue;
		     }
         }	 
	}

4、函数

	    //定义一个函数；
	    .test(@color:red,@size:14px){
	        background: @color;
	        font-size:@size;
	    }
	    .box1{
	    //  不传参，使用默认的；
	        .test()
	    }
	    .box2{
	    //  给函数传参；
	        .test(@color:green,@size:30px)
	    }

5、匹配模式 @_

	    <div class="box"></div>
	    //定义的css
	    <style lang="less">
	    .sjx(@_,@color,@size){
	        width: 0;
	        height:0;
	        border:@size solid @color;
	        border-color:transparent;
	    }
	    //左边三角形
	    .sjx(l,@color,@size){
	        border-left-color:@color;
	    }
	    //上边三角形
	    .sjx(t,@color,@size){
	        border-top-color:@color;
	    }
	    //右边三角形
	    .sjx(r,@color,@size){
	        border-right-color:@color;
	    }
	    //左边三角形
	    .sjx(b,@color,@size){
	        border-bottom-color:@color;
	    }
	    //这里匹配调用
	    .box{
	        .sjx(r,red,20px)
	    }
	    </style>

注意

若安装失败，可能是less-loader版本号过高不兼容当前本地
将less-loader卸载后，重新下载低一点的版本

npm uninstall less-loader
npm install less-loader@4.1.0