如何使用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 文件