less浅谈

由于工作需要,最近在开发微信公众号的相关功能,虽然微信公众号的有自己的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,希望可以帮到你。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180401G0JQ9T00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券