vue中less的使用

146 阅读1分钟

如何安装

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

如何使用

image.png

1、less中变量的使用 定义方式:@key:value; 使用方式:@key;

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

3、写减法的时候左右要加空格,否则会理解为杠,运算符 可以对高度、宽度、角度进行计算;

4、函数用法

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

5、引入方式

第一种方式 使用导入式 引入样式库 <style scoped lang="less"> @import url(./less/common.less);

/* 第二种引入方式 在script中导入样式*/ `import './less/common.less' export default {

}`

6、可以嵌套

box2嵌套在box1里面

image.png