如何使用lessc編譯.less文件

LESS ：一種動態樣式語言。

LESS 將 CSS 賦予了動態語言的特性，如 變量， 繼承， 運算， 函數. LESS 既能夠在 客戶端 上運行 (支持IE 6+, Webkit, Firefox)，也能夠藉助Node.js或者Rhino在服務端運行。

 

在介紹如何經過 lessc （less源碼編譯器）把編寫好的.less文件生成.css文件以前，很是有必要了解一下Node.JS。

1、初識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，查看版本

2、安裝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添加到環境變量中。

3、編寫.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 文件