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")
/* less 里面 &表示当前元素的父级 */
写减法的时候左右要加空格,否则会理解为杠- 多层嵌套+变量计算;
混合 = 函数
我是box1
我是box2
//定义一个函数;
.test(@color:red,@size:14px){
background: @color;
font-size:@size;
}
.box1{
// 不传参,使用默认的;
.test()
}
.box2{
// 给函数传参;
.test(@color:green,@size:30px)
}
运算符 可以对高度、宽度、角度进行计算;
- {{item}}