CSS 擴(kuò)展語(yǔ)言(less.js)

LESS 將 CSS 賦予了動(dòng)態(tài)語(yǔ)言的特性，如 變量， 繼承， 運(yùn)算， 函數(shù). LESS 既可以在 客戶端 上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服務(wù)端運(yùn)行。

在客戶端使用

引入你的 .less 樣式文件的時(shí)候要設(shè)置 rel 屬性值為 “stylesheet/less”:


然后點(diǎn)擊頁(yè)面頂部download按鈕下載 less.js, 在 中引入:


注意你的less樣式文件一定要在引入less.js前先引入。

備注：請(qǐng)?jiān)诜��?wù)器環(huán)境下使用！本地直接打開可能會(huì)報(bào)錯(cuò)！

監(jiān)視模式

監(jiān)視模式是客戶端的一個(gè)功能，這個(gè)功能允許你當(dāng)你改變樣式的時(shí)候，客戶端將自動(dòng)刷新。

要使用它，只要在URL后面加上'#!watch'，然后刷新頁(yè)面就可以了。另外，你也可以通過在終端運(yùn)行l(wèi)ess.watch()來啟動(dòng)監(jiān)視模式。

在服務(wù)器端使用

安裝

在服務(wù)器端安裝 LESS 的最簡(jiǎn)單方式就是通過 npm(node 的包管理器), 像這樣:

$ npm install less
如果你想下載最新穩(wěn)定版本的 LESS，可以嘗試像下面這樣操作:

$ npm install less@latest
使用

只要安裝了 LESS，就可以在Node中像這樣調(diào)用編譯器:

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {
console.log(css);
});
上面會(huì)輸出

.class {
width: 2;
}