Less 的使用方法

Less 可以直接在瀏覽器端運行（支持IE6+、Webkit、Firefox），也可以借助Node.js或者Rhino在服務端運行。

Less是一種動態語言，無論是在瀏覽器端，還是在服務器端運行，最終還是需要編譯成 CSS，才會發揮其作用。

瀏覽器端使用

在瀏覽器端直接使用Less，瀏覽器會直接為頁面應用編譯后的CSS樣式，而不是生成單獨的CSS文件。

在瀏覽器端直接使用Less，需要一個腳本的支持，這個腳本就是Less.js，它Less解析器，可以在瀏覽器端把 .less 文件解析成CSS樣式。你可以從 http://Lesscss.org下載最新版本的Less.js。

瀏覽器端使用Less，只需兩步：

第一步，引入 .less 文件。

1. <link rel="stylesheet/less" type="text/css" href="styles.less">

可以看出，Less 源文件與標准 CSS 文件的引入方式完全相同，只是在引入 .less 文件時，要將 rel 屬性設置為“stylesheet/less”。

第二步，引入Less.js文件。

1. <script src="Less.js" type="text/javascript"></script>

需要特別注意的是：

1）.less 樣式文件一定要在 Less.js之前引入，這樣才能保證 .less 文件被正確編譯。

2）由於瀏覽器端使用Less時，是使用 ajax 來拉取 .less 文件，如果直接在本機文件系統打開（即地址是file://開頭）或者是有跨域的情況下，會拉取不到 .less 文件，導致樣式無法生效。因此，必須在http(s)協議下使用，即必須在服務器環境下使用。

3）還有一種情況容易導致樣式無法生效，就是部分服務器（以IIS居多）會對未知后綴的文件返回404，導致無法正常讀取 .less文件。解決方案是，在服務器中為 .less 文件配置MIME值為 text/css。一種更簡單的方法，就是直接將 .less 文件改名為 .css 文件即可。

在開發階段，在頁面中嵌入一個 Less.js 將Less在線編譯成CSS樣式，確實很方便。但是，在線編譯會產生加載延遲，即便在瀏覽器中有不足一秒的加載延遲，也會降低性能。如果Javascrip執行錯誤，還會引起美觀問題。因此，在生產環境中，並不推薦這種方式，而是推薦在服務器端使用Less。

服務器端使用

在服務器端使用Less，需要借助於 Less 的編譯器，由它將 Less 源文件編譯成最終的 CSS 文件。最常用方式，就是利用 node 的包管理器 (npm) 進行安裝，安裝成功后就可以在 node 環境中對Less源文件進行編譯。

安裝Less編譯器

為了方便使用 Lessc 這個全局命令，建議采用全局安裝。安裝命令如下：

1. $ npm install Less -g

如果想安裝指定版本，也非常方便，只需在安裝包后添加 @VERSION即可。如，安裝1.6.2版本的命令如下：

1. $ npm install Less@1.6.2 -g

當然，如果你想安裝最新版本，可以嘗試以下命令：

1. $ npm install Less@latest -g

整個安裝過程無需人工干預，安裝完成后的結果如圖 1‑1 所示：

圖1-1  安裝Less編譯器

代碼中用法

只要安裝了 Less，就可以在Node中像這樣調用編譯器：

1. var Less = require('Less');
2. Less.render('.class { width: 1 + 1 }', function (e, css) {
3.     console.log(css);
4. });

經過編譯生成的 CSS 代碼為：

1. .class {
2.   width: 2;
3. }

你也可以手動調用解析器和編譯器：

1. var parser = new(Less.Parser);
2. parser.parse('.class { width: 1 + 1 }', function (err, tree) {
3.     if (err) { return console.error(err) }
4.     console.log(tree.toCSS());
5. });

命令行用法

也可以使用命令行，將 Less文件編譯成靜態的CSS文件，然后在HTML文檔中直接引入CSS文件，而不是Less文件。只需將命令行切換到 styles.less 文件所在的目錄，並執行 Lessc 命令即可。命令如下：

1. $ Lessc styles.less

上面的命令會將編譯后的 CSS 輸出到 stdout。如果希望將CSS代碼保存到指定的文件中，就可以使用以下命令：

1. $ Lessc styles.less styles.css

上述命令就會將 styles.less 文件編譯后的CSS代碼保存到 styles.css 文件中。如何你希望編譯后得到壓縮的CSS，只需提供一個 -x 參數就可以了。命令如下：

1. $ Lessc styles.less styles.css -x