less的安装及应用

less安装

1、npm i less --save-dev 把less源码安装到开发环境
（less文件是通过less.loader.js 来编译成css最后加载到页面中的 ）
2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）
3、lessc -v 查看版本 如果版本号显示不出来 npm i less -g 全局安装一下less
4、在main.js import less from 'less' 

 Vue.use(less)【 作用：在所有页面都可以使用less预编译css语言】

5、独立的vue文件需要引入less, style lang="less"
less中变量的使用 定义方式：@key:value; 使用方式：@key; 字符串拼接变量使用方式 @img:'./img/'; background:url("@{img}1.png") url里面必须要使用引号(单双引号都可以)
写减法的时候左右要加空格，否则会理解为杠-多层嵌套+变量计算；

使用：

@pink: pink;
@skyblue: skyblue;
@orange: orange;
@img: "../assets/";
@k: 100px;
.test(@color:@pink,@size:14px) {
    background: @color;
    font-size: @size;
  }
  .a {
    .test();
  }
  .b {
    .test(@color:@skyblue,@size:30px);
  }

.box {
  width: 200px;
  height: 200px;
  background: url("@{img}logo.png") no-repeat;
}
h1 {
  color: @pink;
}
.box1 {
  width: @k*2;
  height: @k*2;
  background: @skyblue;

  .box2 {
    width: @k;
    height: @k;
    background: @orange;
  }
  .box3 {
    width: @k / 2;
    height: @k / 2;
    background: @pink;
  }
}

ul {
  width: @k*2;
  height: @k*2;
  background: @skyblue;

  li:nth-of-type(1) {
    width: @k - 20px;
    background: @orange;
  }
  li:nth-of-type(2) {
    width: @k + 20px;
    background: @pink;
  }
  li:nth-of-type(3) {
    width: @k + 10px;
    background: @orange;
  }