【LESS系列】简介和使用

LESS —— 一个CSS预编译框架，它在CSS的语法基础之上，引入了变量、Mixin（混入）、运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，LESS可以让我们用更少的代码做更多的事情。

 

有CSS基础的同学，学习LESS会非常容易上手，因为它们的非常相似。

 

本质上，LESS包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。LESS并没有裁剪CSS原有的特性，更不是用来取代CSS的，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。

 

LESS可以直接在客户端使用，也可以在服务器端使用，但是直接使用LESS的做法我是不推荐的，因为这样增加了性能损耗。在实际项目开发中，我们更推荐将LESS文件编译生成静态CSS文件，并在HTML文档中应用。因此，这里直接省略了如何在客户端和服务端使用LESS，有兴趣的同学，可以到【http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/】这篇文章找到相关的信息，and本文中不少的内容也是摘自该文章，这里顺便表达对该文章的尊重。

 

如何将LESS文件编译生成静态CSS文件呢？小生在实际开发中所用的方法是通过Webstrom的LESS CSS Compiler插件。它能在LESS文件修改保存的时候检测LESS文件变化，然后编译生成CSS文件。当然，对于有些同学来说，开发机器不怎么给力，你也可以手动触发编译，这样可以减轻机器负担。（回想起当年的血泪史了...）当然，方法总是比问题多。除了这个方法之外，肯定还有别的方法，这里就不作探讨了，有需要的同学自行摸索吧。

 

接下来我们来具体说说我上面提到的方法——Webstrom加LESS CSS Compiler插件，三言两语的描述，相信对于没接触过的同学来说还是太过模糊，我们来点实际的。

 

Webstrom官网：http://www.jetbrains.com/webstorm/index.html

LESS CSS Compiler官方插件页：http://plugins.jetbrains.com/plugin?pr=&pluginId=7059

Webstrom的下载我相信应该是没什么大问题的，因为就算上不去官网，国内也应该有其他的下载资源。

对于破解嘛，天朝的码农们的强项，人人必备，也无须我废话。

至于LESS CSS Compiler...如果你实在打不开官方插件页，试试直接用下面的url下载试试看吧...

http://plugins.jetbrains.com/files/7059/14973/lessc-plugin.zip

如果这样也不行，那建议你考虑用其他方法吧，国内我一时也没找到很好的下载资源。

 

下载完之后，开始安装吧...

Webstrom，傻瓜式无脑安装，不废话...不过这里补充一点，我这时用的是Webstrom8.0版本，所以后面的步骤都是以此版本为基础的。

安装好后，运行Webstrom——右上角菜单栏file选项卡——settings——左侧选Plugins——右侧面板底部的几个按钮中找到Install plugin from disk...——选中LESS CSS Compiler插件zip压缩包的所在路径——点OK安装——再点击settings窗口上的OK按钮——弹出重启Webstrom提示框——重启Webstrom——LESS CSS Compiler插件安装大功告成~~~

然后是配置阶段，好吧，到了这个阶段必须上图了...

 

首先建一个测试项目，结构如下，简单得不能再简单了吧~~

 

然后打开settings界面，找到LESS Profiles选项，然后点击加号添加配置，输入配置名，这里我用的是test，然后选中刚添加的test配置，就能看到如下图的界面

Name - 配置名，也就是刚刚的test

LESS source directory - less源文件所在目录

Include files by path - 对应目录中，需要执行编译的less文件（多个文件用“,”隔开，支持“*”和“?”分别进行多个和单个字符的匹配）

Exclude files by path - 对应目录中，不需要执行编译的less文件（多个文件用“,”隔开，支持“*”和“?”分别进行多个和单个字符的匹配）

CSS Output Directory - 生成css文件的存放目录

Compile automatically on save - 当文件修改并保存时，自动编译（个人不建议勾选此项，比较推荐使用手动编译）

Compress CSS output - 编译后生成压缩版的CSS文件（我在开发过程中一般情况下都会勾选它，只有在个别特殊调试有需要的时候，才会把选中去掉）

 

因为我们需要用到手动触发less编译，所以这里给这一操作设置一下快捷键。打开settings界面，找到keymap，然后在快捷键列表里找到Compile to CSS。

啥？怎么找？合理运用Webstorm自带的搜索功能吧，这里就不再对这些细节做逐步细述了。我已经是一个粗枝大叶的人了，我都知道的东西，你不知道的话，你就该检讨一下了。

找到之后，觉得什么快捷键方便好记，随便用。只要注意不要和默认快捷键冲突就行了，如果出现冲突，Webstorm会有提示的。所以后面你爱咋折腾咋折腾，我在这里不废话了。

 

最后让我们来测试一下LESS是否能成功编译

先在test.less文件上写下这么一段代码...

@red: #ff0000;
.aa {
  color: @red;
}

然后手动触发LESS编译，没多久CSS输出目录中的同名CSS文件里输出了这样的结果...（PS：如果同名的CSS文件还没有创建，编译器会帮我们自动创建一个的）

.aa {
  color: #ff0000;
}

Nice！编译成功！至此大功告成。

 

上面的方法是我目前用过的最简便的方法了。不过有一个弊端是依赖Webstrom及其插件，对于开发工具统一化的团队来说会比较适合。

但如果是一些比较大的团队，成员所用开发工具并不统一的话，那就不好推广了。

这时候，我们可以考虑更通用的做法，比如通过grunt的grunt-contrib-less和grunt-contrib-watch工具。

这里就不再对这种做法进行细述了，网上关于grunt使用的学习资料多不胜数，如有需要自行研究吧。