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 查看版本

4、在main.js import less from 'less' Vue.use(less)

5、独立的vue文件需要引入less

less中变量的使用 定义方式：@key:value; 使用方式：@key; 字符串拼接变量使用方式 @img:'./img/'; background:url("@{img}1.png")

写减法的时候左右要加空格，否则会理解为杠- 多层嵌套+变量计算；

< div class="box1">

< div class="box2">

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

< style lang="less"> @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; } } }

混合 = 函数 < div class="box1">我是box1 < div class="box2">我是box2

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

运算符 可以对高度、宽度、角度进行计算； < ul> < li v-for="item in 4">{{item}} < /ul> < style lang="less" scoped> @k:10px; ul{ list-style: none; li{ border:1px solid ; margin:10px 0 ; } li:nth-child(1){ width: @k + @k; height:@k; } li:nth-child(2){ width: @k -5px; height:@k; } li:nth-child(3){ width: @k * @k; height:@k; } li:nth-child(4){ width: @k / 2;; height:@k; } }