为了账号安全,请及时绑定邮箱和手机立即绑定

10、less的引用及公共变量的抽离

标签:
Sass/Less

一、什么是less?

less是什么自然不用多言,乃一个css预编译器,可以扩展css语言,添加功能如如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展性。
官网:http://lesscss.org/usage/

二、项目中使用less

1、less的安装
打开命名行,安装lessless-loader就可以了:

$ cnpm install less less-loader --save-dev

webp

install

2、使用less
怎么使用,大概就这样,不需要引入什么的,直接用,定义下lang属性就行

<style lang="less" scoped></style>

我们新建一个home.vue页面

webp

home.vue

三、less与公共变量

一般在我们项目中,需要把所有统一的色调、样式提出出来作为公共变量使用,比如这里,假设红色是我们项目的基调色,很多页面都要用到,所以我们定义一下这个背景色。

1、我们在styles下面新建一个variables.less文件,用于存放less公共变量,然后定义一下全局背景色

webp

variables

这是定义less变量的语法,还有很多less的语法,大家可以去官网看看。

2、项目中引入

webp

项目中引入

这里需要踩的坑我都注释了,看注释就行。

3、ok,我们去浏览器中看看效果

webp

浏览器

那么,以后再项目中就可以把所有的页面公共的变量抽离出来使用了。



作者:Ewall_
链接:https://www.jianshu.com/p/bdd4dd2c098b


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消