直接在瀏覽器端使用

第一步，引入 .less 文件（註意要將 rel 屬性設置為“stylesheet/less”）

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

第二步，引入Less.js文件

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

（這裏的js文件可以去官網下載）

需要特別註意的是：

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。

我在直接使用瀏覽器引用的時候，出現了第二種情況的錯誤，一直沒找到解決方案。

再考慮到實際運用性，故采用在服務器端使用的方式。

在服務器端Node.JS中使用

1. 安裝Less編譯器

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

$ npm install Less -g

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

$ npm install Less@1.6.2 -g

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

$ npm install Less@latest -g

2. 編譯less文件並輸出標準格式的css文件

$ lessc styles.less
 
 styles.css

註：要輸出最小化的CSS可以使用clean-css插件。當插件安裝時，用-clean css選項指定一個縮小的css輸出:

$ lessc --clean-css styles.less styles.min.css

代碼中用法

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

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

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

.class {
  width: 2;
}

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

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

筆記：less的使用方法