如何使用lessc编译.less文件

LESS ：一种动态样式语言。

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

 

在介绍如何通过 lessc （less源码编译器）把编写好的.less文件生成.css文件之前，非常有必要了解一下Node.JS。

一、初识Node.js

Node.js不是JS应用、而是JS运行平台，负责执行服务器端的Javascript代码。事实上，Node.js采用C++语言编写而成，是一个Javascript的运行环境。
Node.js采用了Google Chrome浏览器的V8引擎，性能很好，同时还提供了很多系统级的API，如文件操作、网络编程等。

要想了解更多Node.JS，请参考《深入浅出Node.js》前两篇文章即可

1）.深入浅出Node.js（一）：什么是Node.js

2）.深入浅出Node.js（二）：Node.js&NPM的安装与配置（PS：安装最新版本的Node.JS已默认自带了NPM，无需通过GitHub去安装）

我本机的Node.JS默认安装在D:\nodejs\目录下，如图

启动node.js，查看版本

二、安装LESS包

通过npm install -d less命令安装LESS包。

为了将less包安装在nodejs的node_modules目录下，可以先进入d:盘，然后使用该命令

LESS包安装完成后，进入D:\nodejs\node_modules\，该目录下有三个目录，分别为less，npm和.bin（该目录下有lessc编译器），把D:\nodejs\node_modules\.bin添加到环境变量中。

三、编写.less文件并编译它

关于LESS语言的语法本文不做介绍，请参考 http://www.bootcss.com/p/lesscss/。

这是一个简单的测试代码test.less，内容如下

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

该文件位于 E:\Code\VS2013\BootstrapDemo\LessDemo\Less\test.less。

启动node.js控制台，进入test.less文件所在的目录，输入lessc test.less > test.css命令，less文件就会被编译成css文件

打开生成的test.css 文件