由于工作需要,最近在开发微信公众号的相关功能,虽然微信公众号的有自己的UI库-weui,但是在画界面的时候,还是会自定义大量的css样式,而且发现很多css样式里面都有很多相同的属性。
我们可以看到红框框里面的属性定义是完全相同的,绿色框框内属性定义值不一样,我们都知道css是不能够定义变量的,也不能嵌套,它没有编程语言的特性。我们通常都是复制然后粘贴,这些css,来达到想要的效果。
下面我们再来看一组例子:
这一组样式的效果和上面的效果是完全一样,而且我们可以清楚的看到里面有变量、混合(mixin)、函数等功能。
是不是很神奇啊,其实这组效果我用了less来编写,less在11年就已经诞生啦,只不过很多程序员,习惯了存css编程而已。
下面我们就来看一下less:
个人比较喜欢用sublime text来编程,那我们看一下如何用sublimeText3编写less并用Nodejs自动编译成css;
我们首先需要为sublimeText3安装一些插件
1、安装less插件,让sublimeText3高亮起来,首先确保sublime上已安装了Package Control) 按住ctrl+shift+p>install Package>输入less按Enter。
2、less2css插件是当保存less文件的时候自动生成同名的css文件;当保存less文件的时候提示编译错误信息;ctrl+shift+p>install Package>输入less2css按Enter 。
3、配置环境,安装node.js,到nodejs官网下载就可以了:https://nodejs.org/en/
4、安装less,运行-cmd,属性命令npm install less -g然后安装less-plugin-clean-css插件,输入npm install less-plugin-clean-css -g。
准备就绪,让我们来看一下less的语法:
less中可以s定义变量,特别的方便,看例子
输出css:
less还可以嵌套:
输出css:
less还可以混合调用:
输出css:
来看一组less复杂调用:
输出css:
在less中还可以运用函数:
是不是很方便啊。小伙伴们可以尝试一下哦!!!
下面我们说一下在客户端中的使用,其实很简单:
引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
然后点击页面顶部download按钮下载 less.js, 在 中引入:
注意你的less样式文件一定要在引入less.js前先引入。
以上就是less的一个简短的介绍,个人感觉还是挺方便的,如果你还在写存css代码,不妨试一下less,希望可以帮到你。
领取专属 10元无门槛券
私享最新 技术干货