使用koala編譯
Koala 是一款由國人開發的開源預處理語言圖形編譯工具,目前已支持 Less、Sass、Compass 與CoffeeScript。
目前支持以下系統:Windows,Mac, 10.7+,Linux: 32bit / 64bit,Ubuntu: 32bit / 64bit;
我們可以從他們官方網站下載 koala:點擊進入,使用文檔點擊進入
使用方法:
-
安裝完成后打開 Koala,把文件夾拖入界面或者是在左側加號處選擇文件夾,此時在界面左邊有文件夾路徑產生。
-
同時有 less 文件將顯示在界面中間,右鍵文件選擇輸出 CSS 文件的路徑。
-
左鍵點擊 less 文件在右邊則有功能選項欄彈出,下面將介紹功能。
功能介紹:
自動編譯(實時編譯):
當開啟自動編譯時,使用編輯器按下 Ctrl+S 保存時,CSS 文檔會自動更新。如果沒有打開這個功能,那么需要使用者在自行點擊"執行編譯"才更新 CSS 文檔。
編譯選項:
- 行注釋(line comments):這個功能會在 css 文件里對應的 less 編譯出來的 css 代碼上方提供一個注釋。注釋的內容分別說明來自 less 的第幾行開始,同時標明是來自那個 less 文件。
-
調試信息(debug info):這個調試功能是在保存時自動檢測有無錯誤,注意實時編譯關閉時不會開啟,需要在你執行時才彈出錯誤。所以,建議開啟實時編譯。目前調試功能僅能檢測出一些影響編譯的錯誤:例如沒有帶{}、沒帶分號。這些錯誤,而有沒有使用選擇器或者樣式輸入錯誤則不會提示。
-
輸出方式(代碼壓縮):
- 正常(normal):顧名思義,就是不壓縮。
- 壓縮(compress):顧名思義,就是壓縮。
- YUI壓縮(YUIcompress):使用 YUI 的壓縮打包工具進行壓縮。
Node.js命令行中使用
安裝
在Node.js中安裝LESS最簡單的方式就是使用Node包管理工具npm來安裝:
npm install -g less
如果你使用Mac或者Linux,可能需要使用管理員身份安裝:
sudo npm install -g less
在命令行中使用
一旦安裝完成,就可以在命令行中調用,例如:
lessc styles.less
這樣的話編譯后的CSS將會輸出到stdout中,你可以選擇將這個輸出重定向到文件中:
lessc styles.less > styles.css
如果你想輸出一個壓縮后的CSS,只要加到-x
選項即可。如果你想要更NB的壓縮,你也可以選擇使用YUI CSS壓縮器,只要加上--yui-compress
選項即可。
直接運行lessc,不帶任何參數將可以看到所有的命令行參數。
在Node.js代碼中使用
你可以在Node中調用編譯器,例如:
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, css) {
console.log(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());
});
設置
你可以給編譯器傳入一些參數:
var parser = new(less.Parser)({
paths: ['.', './lib'], // 指定@import搜索的目錄
filename: 'style.less' // 為了更好地輸出錯誤信息,可以指定一個文件名
});
parser.parse('.class { width: (1 + 1) }', function (e, tree) {
tree.toCSS({ compress: true }); // 壓縮輸出的CSS
});
瀏覽器端使用
你也可以直接在瀏覽器中使用LESS,詳情請查看這里。