前言:GitHub:https://github.com/Ewall1106/mall
一、什么是less?
less是什么自然不用多言,乃一个css预编译器,可以扩展css语言,添加功能如如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展性。
官网:http://lesscss.org/usage/
二、项目中使用less
1、less的安装
打开命名行,安装less
和less-loader
就可以了:
$ cnpm install less less-loader --save-dev
![img_4236defcc58d1e5677cad765ab7a07a0.png](https://i-blog.csdnimg.cn/blog_migrate/049894cb0de106e7784cfc2c0b0c4e89.png)
install
2、使用less
怎么使用,大概就这样,不需要引入什么的,直接用,定义下lang
属性就行
<style lang="less" scoped>
</style>
我们新建一个home.vue
页面
![img_578c6f59ea75063d4a651a7d421b4e77.png](https://i-blog.csdnimg.cn/blog_migrate/b26b1d17dabf8c1a9e57d84cc3f6e9c5.png)
home.vue
三、less与公共变量
一般在我们项目中,需要把所有统一的色调、样式提出出来作为公共变量使用,比如这里,假设红色是我们项目的基调色,很多页面都要用到,所以我们定义一下这个背景色。
1、我们在styles
下面新建一个variables.less
文件,用于存放less公共变量,然后定义一下全局背景色
![img_6236b5a778087583b489644ecda288c6.png](https://i-blog.csdnimg.cn/blog_migrate/5013d480f49f53c7dbf61a7d2c36636f.png)
variables
这是定义less变量的语法,还有很多less的语法,大家可以去官网看看。
2、项目中引入
![img_22d6a07199ec584c18e095027525dc3f.png](https://i-blog.csdnimg.cn/blog_migrate/2688e509f63b1e67673a28c3312e562b.png)
项目中引入
这里需要踩的坑我都注释了,看注释就行。
3、ok,我们去浏览器中看看效果
![img_5a0101727cee6102979e5af851cb5de5.png](https://i-blog.csdnimg.cn/blog_migrate/2f976e69290576946284fe53e7e21343.png)
浏览器
那么,以后再项目中就可以把所有的页面公共的变量抽离出来使用了。