Less使用說明


使用koala編譯

Koala 是一款由國人開發的開源預處理語言圖形編譯工具,目前已支持 LessSassCompass 與CoffeeScript

目前支持以下系統:Windows,Mac, 10.7+,Linux: 32bit / 64bit,Ubuntu: 32bit / 64bit;

我們可以從他們官方網站下載 koala:點擊進入,使用文檔點擊進入

使用方法:

  1. 安裝完成后打開 Koala,把文件夾拖入界面或者是在左側加號處選擇文件夾,此時在界面左邊有文件夾路徑產生。

    選擇文件夾

  2. 同時有 less 文件將顯示在界面中間,右鍵文件選擇輸出 CSS 文件的路徑。

    設置輸出路徑

  3. 左鍵點擊 less 文件在右邊則有功能選項欄彈出,下面將介紹功能。

    設置輸出選項

功能介紹:

自動編譯(實時編譯):

當開啟自動編譯時,使用編輯器按下 Ctrl+S 保存時,CSS 文檔會自動更新。如果沒有打開這個功能,那么需要使用者在自行點擊"執行編譯"才更新 CSS 文檔。

自動更新選擇

編譯選項:

  1. 行注釋(line comments):這個功能會在 css 文件里對應的 less 編譯出來的 css 代碼上方提供一個注釋。注釋的內容分別說明來自 less 的第幾行開始,同時標明是來自那個 less 文件。
  2. 調試信息(debug info):這個調試功能是在保存時自動檢測有無錯誤,注意實時編譯關閉時不會開啟,需要在你執行時才彈出錯誤。所以,建議開啟實時編譯。目前調試功能僅能檢測出一些影響編譯的錯誤:例如沒有帶{}、沒帶分號。這些錯誤,而有沒有使用選擇器或者樣式輸入錯誤則不會提示。

    輸出調試信息

  3. 輸出方式(代碼壓縮):

    • 正常(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,詳情請查看這里


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM