初识CSS预处理器

写惯了Java和C#之类的代码，每次写CSS的都都感觉很不爽，因为很多如果采用OOP和思想来写CSS的话，绝对不需要将CSS写得这么复杂，而且修改起来也会方便得多——不过因为CSS不支持OOP的语法，所以也只能感叹而已。

　　很偶然，了解到了LESS，于是知道原来CSS还有预处理器。虽然很早以前想过写这么一个东西，不过一想到语法分析这种事情就头痛——虽然有YACC和LEX，但是语法还是需要自己定义的。

　　说话发现了LESS之后，发现LESS会使写CSS成为一件愉快的事情，说起来LESS的语法也不复杂，它的中文官网（http://www.lesscss.net/）上有介绍，所以我也就懒得去费口舌了。

　　不过据介绍，它只能在Node.js服务端或者Html页面上通过less.js来翻译执行。我的项目中没有用到Node.js，到是可以采用less.js来使用，问题是，页面加载过程中用JS来解释N个.less文件，那效率一定是会受到影响的，为嘛LESS不提供静态编译工具呢？

　　于是Google之。发现了原来有WinLess，SimpLESS之类的工具，可以在Windows下打开LESS文件，编译成CSS。除此之外，还有一些在线LESS编译器……这些工具都可以在Less Online Parser上找到官方链接。

　　现在出现了另一个问题，我希望在编译的时候自动将.less编译成.css，而不是再启动一个工具来进行编译，要不然也太不自动化了。于是继续Google，换了N个关键字，未果……于是想自己来写段JS代码来HACK less.js，初步想法是通过Windows的WSH解释Javascript，模拟一个HTML的环境给less.js运行——不过最终觉得麻烦，放弃了，继续Google。

　　功夫不负有心人，总算让我找到了一个less.js-windows，作者跟我想法差不多，不过很感谢他比我勤快多了！有了这东西，就可以在命令行翻译.less文件生成.css了。

　　知道LESS之后，搜索了一下Visual Studio的插件，很高兴Mindscape Web Wrokbench支持LESS，而且它还支持Sass——哦，不认识，Google下。原来CSS预处理器还有Sass和Stylus等，这里有一篇文章介绍它们的异同。

本文转自边城__ 51CTO博客，原文链接：http://blog.51cto.com/jamesfancy/901441，如需转载请自行联系原作者