less筆記

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
如圖：

代碼中用法

只要安裝了 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. });
　　　　


　　命令行用法

1. 也可使用命令行，將 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

下面爲轉換效果：左側爲less代碼，右側爲編譯轉換成的css