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使用的学习资料多不胜数,如有需要自行研究吧。