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，希望可以帮到你。