Vue 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

less中变量的使用

定义方式：@key:value; 使用方式：@key; 字符串拼接变量使用方式 @img:'./img/'; background:url("@{img}1.png") url里面必须要使用引号(单双引号都可以)

混合 = 函数

//定义一个函数.test里面有默认值

box1不传参，使用的是默认值

box2给函数传参使用的是红色和12px

运算符

可以对高度、宽度、角度进行计算；+-*/均可

写减法的时候左右要加空格，否则会理解为杠-

第一种方式 使用导入式 引入样式库

@import url(./less/common.less);

css里面可以使用@import url(./init.css); 注意后缀式.css

    App页面引入第一个less文件

    第一个less页面引入第二个less文件
    在.less文件中也可以引入别的less文件 
    从而提高代码的复用性 */ @import url(./init.less);

    第二个less页面