命令列使用

編輯「command-line-usage」的標記原始碼

使用命令列將 .less 檔案編譯成 .css

注意!如果您不喜歡使用命令列,可以進一步了解 Less 的 GUI

安裝

使用 npm 安裝

npm install less -g

-g 選項會安裝可於全球使用的 lessc 指令。對於特定版本 (或標籤),您可以在我們的套件名稱後加上 @VERSION,例如 npm install [email protected] -g

安裝用於 Node 開發

或者,如果您不想在全球使用編譯器,您可能會在

npm i less --save-dev

這會在您的專案資料夾中安裝 lessc 的最新官方版本,也會將其新增至專案的 package.json 中的 devDependencies

lessc 的測試版本

定期地,隨著新功能的開發,lessc 的建置版本會發佈到 npm,標記為 beta。這些建置版本不會發佈為 @latest 官方版本,而且通常會在版本中包含 beta(使用 lessc -v 取得目前版本)。

由於修補版本是不破壞性的,我們會立即發佈修補版本,而 alpha/beta/候選版本會發佈為次要或主要版本升級(我們自 1.4.0 起努力遵循 語意版本控制)。

伺服器端和命令列使用

此儲存庫中包含的二進位檔案 bin/lessc 可搭配 *nix、OS X 和 Windows 上的 Node.js 使用。

用法lessc [選項 選項=參數 ...] <來源> [目的地]

命令列使用

lessc [option option=parameter ...] <source> [destination]

如果來源設為 `-'(破折號或連字元減號),輸入會從標準輸入讀取。

範例

將 bootstrap.less 編譯為 bootstrap.css

lessc bootstrap.less bootstrap.css

lessc 的特定選項

所有其他選項,請參閱 Less 選項

靜音

lessc -s lessc --silent

停止顯示任何警告。

版本

lessc -v
lessc --version

說明

lessc --help
lessc -h

列印說明訊息,包含可用選項,然後結束。

Makefile

lessc -M
lessc --depends

輸出 makefile 匯入相依性清單至 stdout。

無色彩

已過時.

lessc --no-color

清除 CSS

在 v2 的 less 中,清除 CSS 不再包含為直接相依性。若要將清除 CSS 與 lessc 搭配使用,請使用 清除 CSS 外掛程式


瀏覽器使用

編輯「using-less-in-the-browser」的標記語言來源

在瀏覽器中使用 Less.js 是入門最簡單的方式,而且方便使用 Less 開發,但在生產環境中,當效能和可靠性很重要時,我們建議使用 Node.js 或許多可用的第三方工具進行預先編譯。

首先,將您的 .less 樣式表連結到將 rel 屬性設定為「stylesheet/less

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

接下來,下載 less.js,並將其包含在您頁面 <head> 元素中的 <script></script> 標籤中

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

設定選項

您可以透過程式設定選項,方法是在指令碼標籤之前在 less 物件上設定選項 - 這樣就會影響所有初始連結標籤和 less 的程式使用。

<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

另一種方法是在指令碼標籤上指定選項,例如

<script>
  less = {
    env: "development"
  };
</script>
<script src="less.js" data-env="development"></script>

或者為了簡潔起見,可以在指令碼和連結標籤上將它們設定為屬性

<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ "myvar": "#ddffee", "mystr": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

瀏覽器支援

Less.js 支援所有現代瀏覽器(Chrome、Firefox、Safari 和 Edge 的最新版本)。雖然可以在實際環境中於用戶端使用 Less,但請注意這樣做會對效能造成影響(儘管 Less 的最新版本快了很多)。此外,如果發生 JavaScript 錯誤,有時會出現外觀問題。這是靈活性與速度之間的權衡。對於靜態網站而言,我們建議在伺服器端編譯 Less,以獲得最快的效能。

在製作中使用客戶端較少的原因,例如,如果您希望允許使用者調整會影響佈景主題的變數,並希望即時顯示給他們 - 在這種情況下,使用者不用擔心在看到之前等待樣式更新。

提示

  • 請務必在指令碼之前包含您的樣式表。
  • 當您連結多個 .less 樣式表時,每個樣式表都會獨立編譯。因此,您在樣式表中定義的任何變數、混合或命名空間都無法在其他樣式表中存取。
  • 由於瀏覽器的同源政策,載入外部資源需要 啟用 CORS

監控模式

若要啟用監控模式,選項 env 必須設為 development。然後在 less.js 檔案包含在內之後,呼叫 less.watch(),如下所示

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

或者,您可以透過將 #!watch 附加到 URL,暫時啟用監控模式。

修改變數

啟用 Less 變數的執行時間修改。當呼叫新值時,Less 檔案會重新編譯,而不會重新載入。簡單的基本用法

less.modifyVars({
  '@buttonFace': '#5B83AD',
  '@buttonText': '#D9EEF2'
});

偵錯

可以在 CSS 中輸出規則,讓工具找出規則的來源。

指定選項 dumpLineNumbers 如上所述,或將 !dumpLineNumbers:mediaquery 加入 URL。

您可以使用 mediaquery 選項搭配 FireLESS(它與 SCSS 媒體查詢偵錯格式相同)。另請參閱 FireLess 與 Less v2comment 選項可用於在內嵌編譯的 CSS 程式碼中顯示檔案資訊和行號。

選項

在載入 less.js 程式碼之前,在全域的 less 物件中設定選項

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    logLevel: 2,
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    globalVars: {
      var1: '"quoted value"',
      var2: 'regular value'
    },
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

Less.js 在瀏覽器中的特定選項

所有其他選項,請參閱 Less 選項

async

類型:布林值

預設值:false

是否使用 async 選項來請求匯入檔案。請參閱 fileAsync

env

類型:字串 預設值:取決於網頁 URL

執行環境可能是 developmentproduction

在生產環境中,您的 CSS 會快取在本地儲存空間中,且資訊訊息不會輸出至主控台。

如果文件的 URL 以 file:// 開頭或在您的本機電腦上或具有非標準埠,它將自動設定為 development

例如:

less = { env: 'production' };

errorReporting

類型:字串

選項:html|console|function

預設值:html

設定編譯失敗時的錯誤回報方法。

fileAsync

類型:布林值

預設值:false

在使用檔案協定的網頁中,是否非同步地請求匯入。

functions (已棄用 - 使用 @plugin)

類型:物件

使用者函式,以名稱為鍵值。

less = {
    functions: {
        myfunc: function() {
            return less.Dimension(1);
        }
    }
};

可以使用類似 Less 原生函式的語法,例如:

.my-class {
  border-width: unit(myfunc(), px);
}

logLevel

類型:數字

預設值:2

在 JavaScript 主控台中記錄的訊息量。注意:如果是在 production 環境中,將不會記錄任何訊息。

2 - Information and errors
1 - Errors
0 - Nothing

poll

類型:整數

預設值:1000

在監控模式下輪詢之間的時間(以毫秒為單位)。

relativeUrls

類型:布林值

預設值:false

選擇性調整 URL 以成為相對路徑。如果為 false,URL 已相對於 less 輸入檔案。

useFileCache

類型:布林值

預設值:true(在 v2 之前為 false

是否使用每個階段的檔案快取。這會快取 less 檔案,以便您可以呼叫 modifyVars,而它不會再次擷取所有 less 檔案。如果您使用監控程式或呼叫 refresh 並將 reload 設為 true,則快取會在執行前清除。


Less.js 選項

編輯「less-options」的標記原始碼

跨平台選項

包含路徑

lessc --include-path=PATH1;PATH2 { paths: ['PATH1', 'PATH2'] }

如果 @import 規則中的檔案不在該確切位置,Less 會在傳遞給此選項的位置尋找它。例如,你可以使用此選項來指定一個庫的路徑,你希望在 Less 檔案中簡單且相對地參照它。

根路徑

lessc -rp=resources/
lessc --rootpath=resources/
{ rootpath: 'resources/' }

允許你將路徑新增到 CSS 中的每個產生的匯入和網址。這不會影響 Less 處理的匯入陳述式,只會影響留在輸出 CSS 中的匯入陳述式。

例如,如果 CSS 使用的所有影像都在名為 resources 的資料夾中,你可以使用此選項將其新增到網址中,然後讓該資料夾的名稱可組態。

重寫網址

lessc -ru=off
lessc --rewrite-urls=off
{ rewriteUrls: 'off' }
lessc -ru=all
lessc --rewrite-urls=all
{ rewriteUrls: 'all' }
lessc -ru=local
lessc --rewrite-urls=local
{ rewriteUrls: 'local' }

預設情況下,網址保持原樣 (off),因此如果你匯入子目錄中的檔案,並參照圖片,css 中會輸出完全相同的網址。這個選項允許你改寫匯入檔案中的網址,以便網址始終相對於傳遞給 Less 的基本檔案。例如:

/* main.less */
@import "global/fonts.less";
/* global/fonts.less */
@font-face {
  font-family: 'MyFont';
  src: url('myfont/myfont.woff2') format('woff2');
}

如果未設定任何內容或設定為 rewriteUrls: 'off',編譯 main.less 會輸出

/* main.less */
/* global/fonts.less */
@font-face {
  font-family: 'MyFont';
  src: url('myfont/myfont.woff2') format('woff2');
}

如果設定為 rewriteUrls: 'all',則會輸出

/* main.less */
/* global/fonts.less */
@font-face {
  font-family: 'MyFont';
  src: url('./global/myfont/myfont.woff2') format('woff2');
}

如果設定為 rewriteUrls: 'local',則只會改寫明確相對的網址 (以 . 開頭的網址)

url('./myfont/myfont.woff2') /* becomes */ url('./global/myfont/myfont.woff2')
url('myfont/myfont.woff2') /* stays */ url('myfont/myfont.woff2')

如果你將 Less 與 CSS 模組 結合使用,這可能會很有用,因為 CSS 模組使用類似於 Node.js 的解析語意。

你可能還需要考慮使用 data-uri 函數,而不是這個選項,這會將圖片嵌入到 css 中。

數學

發布 v3.7.0

lessc -m=[選項]
lessc --math=[選項]
{ math: '[選項]' }

Less 已重新建構數學選項,以提供介於先前的 strictMath 設定(始終需要括號)和預設值(在所有情況下執行數學運算)之間的介面功能。

為了減少與 CSS 的衝突,CSS 現在大量在值之間使用 / 符號,現在有一個數學模式需要在除法中使用括號。(這現在是 Less 4 中的預設值。)「嚴格數學」也經過調整,以更直覺的方式運作,儘管支援舊有行為。

math 可用的四個選項是

  • always (3.x 預設) - Less 積極地進行數學運算
  • parens-division (4.0 預設) - 使用 / 運算子時,在括號外不執行除法(但可以用 ./ 運算子在括號外「強制」執行 - ./ 已不建議使用)
  • parens | strict - 所有數學運算式都必須使用括號。
  • strict-legacy (在 4.0 中已移除) - 在某些情況下,如果運算式的任何部分無法評估,則不會評估數學運算式。

always 範例

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: 2px ./ 2;
  d: (2px / 2);
}

輸出

.math {
  a: 2;
  b: 1px;
  c: 1px;
  d: 1px;
}

parens-division

範例

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: 2px ./ 2;
  d: (2px / 2);
}

輸出

.math {
  a: 2;
  b: 2px / 2;
  c: 1px;
  d: 1px;
}

strict

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: (2px / 2) + (3px / 1);
}

輸出

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: 1px + 3px;
}

strict-legacy

在舊版 strictMath 模式中,括號外的混合運算式表示整個括號內的運算式都不會評估。(這可能不是您想要的結果。)

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: (2px / 2) + (3px / 1);
}

輸出

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: (2px / 2) + (3px / 1);
}

嚴格數學運算 (已不建議使用)

此選項已由 math 選項取代。

相對網址 (已不建議使用)

lessc -ru
lessc --relative-urls
{ relativeUrls: true }

已由 rewriteUrls: "all" 取代

嚴格單位

lessc -su=on
lessc --strict-units=on
{ strictUnits: true }

預設為關閉/false。

沒有此選項時,Less 會在進行運算時嘗試猜測輸出單位。例如

.class {
  property: 1px * 2px;
}

在這種情況下,事情顯然不對勁 - 長度乘以長度會得到面積,但 css 不支援指定面積。因此我們假設使用者是要將其中一個值設為值,而不是長度單位,並輸出 2px

開啟嚴格單位後,我們假設這是運算中的錯誤,並拋出錯誤。

IE8 相容性(已棄用)

lessc --ie-compat { ieCompat: true }

從 v3.0.0 開始預設為 false。目前僅用於 data-uri 函式,以確保不會建立瀏覽器無法處理的過大影像。

啟用內嵌 JavaScript(已棄用)

lessc --js { javascriptEnabled: true }

從 v3.0.0 開始預設為 False。啟用在 .less 檔案中內嵌 JavaScript 的評估。這為某些開發人員帶來安全性問題,他們並未預期樣式表的使用者輸入具有可執行程式碼。

已改用 @plugin 選項取代。

全域變數

lessc --global-var="color1=red" { globalVars: { color1: 'red' } }

此選項定義一個變數,檔案可以參照該變數。實際上,宣告會放在 Less 基礎檔案的最上方,表示可以使用該變數,但如果檔案中定義了此變數,也可以覆寫該變數。

修改變數

lessc --modify-var="color1=red" { modifyVars: { color1: 'red' } }

與全域變數選項相反,這會將宣告放在基本檔案的結尾,表示它會覆寫在 Less 檔案中定義的任何內容。

URL 參數

lessc --url-args="cache726357" { urlArgs: 'cache726357' }

此選項可讓您指定參數到每個 URL。例如,這可以用於快取清除。

行號 (已棄用)

lessc --line-numbers=comments
lessc --line-numbers=mediaquery
lessc --line-numbers=all
{ dumpLineNumbers: 'comments' }

產生內嵌原始碼對應。在瀏覽器開始支援原始碼對應之前,這是唯一的選項。

預載入外掛程式

請參閱:預載入外掛程式

Lint

lessc --lint -l { lint: true }

執行 less 剖析器,並僅報告錯誤,而沒有任何輸出。

壓縮 (已棄用)

lessc --compress -x { compress: true }

使用 less 內建壓縮功能進行壓縮。此功能效果尚可,但並未使用所有專門 CSS 壓縮技巧。一般來說,我們建議在 Less 轉換為 CSS 之後,使用第三方工具來清理和壓縮 CSS。

允許從不安全的 HTTPS 主機匯入

lessc --insecure { insecure: true }

Source Map 選項

這些選項大多不適用於在瀏覽器中使用 Less.js,因為您應該使用預先編譯的 Less 檔案產生 source map。

產生 Source Map

lessc --source-map { sourceMap: {} }

指示 less 產生 sourcemap。

Source Map 輸出檔案名稱

lessc --source-map=file.map { sourceMap: { outputFilename: 'file.map' } }

Source Map 根路徑

lessc --source-map-rootpath=dev-files/ { sourceMap: { sourceMapRootpath: 'dev-files/' } }

指定一個根路徑,該路徑應附加到 sourcemap 內每個 less 檔案路徑以及輸出 css 中指定的 map 檔案路徑。

由於基本路徑預設為輸入 less 檔案的目錄,因此根路徑預設為從 sourcemap 輸出檔案到輸入 less 檔案基本目錄的路徑。

例如,如果在網路伺服器上產生一個 css 檔案,但你的 less/css/map 原始檔案在不同的資料夾中,請使用此選項。因此,對於上述選項,你可能會擁有

output.css
dev-files/output.map
dev-files/main.less

Source Map 基本路徑

lessc --source-map-basepath=less-files/ { sourceMap: { sourceMapBasepath: 'less-files/' } }

這是 rootpath 選項的反義詞,它指定要從輸出路徑中移除的路徑。例如,如果您正在編譯 less-files 目錄中的檔案,但原始檔案會在您的網路伺服器中以根目錄或目前目錄的方式提供,您可以指定這項內容以移除路徑中額外的 less-files 部分。

它的預設值是輸入 less 檔案的路徑。

在來源地圖中包含 Less 來源

lessc --source-map-include-source { sourceMap: { outputSourceFiles: true } }

此選項指定我們應該將所有 Less 檔案包含到來源地圖中。這表示您只需要您的地圖檔案就能取得您的原始來源。

這可以與內嵌地圖選項搭配使用,這樣您就完全不需要任何額外的外部檔案了。

來源地圖內嵌地圖

lessc --source-map-inline { sourceMap: { sourceMapFileInline: true } }

此選項指定地圖檔案應內嵌在輸出 CSS 中。這不建議用於製作,但對於開發而言,它允許編譯器產生單一輸出檔案,在支援它的瀏覽器中,使用編譯的 CSS 但顯示未編譯的 less 來源。

來源地圖 URL

lessc --source-map-url=../my-map.json { sourceMap: { sourceMapURL: '../my-map.json' } }

允許您覆寫指向地圖檔案的 CSS 中的 URL。這是當 rootpath 和 basepath 選項無法產生您真正需要時的情況。


預先載入的插件

編輯「插件」的標記來源

在 Less.js 中開始解析之前載入插件

雖然使用外掛最簡單的方式是使用@plugin at 規則,但在 Node.js 環境中,你可以透過命令列或在Less 選項中指定,來預載一個全域性的 Less.js 外掛。

預處理

如果你想要新增一個 Less.js 預處理器,則需要預載外掛。也就是說,一個外掛在解析開始之前就會被呼叫並傳遞原始的 Less 來源。一個範例是Sass 轉 Less 預處理器外掛

注意:預載對於預評估外掛(在 Less 來源被解析後,但在它被評估之前)並非必要。

Node.js

使用命令列

如果你正在使用 lessc,你需要做的第一件事是安裝那個外掛。在像 NPM 這樣的登錄檔中,我們建議 Less.js 外掛使用「less-plugin-」前綴進行註冊(以便於搜尋),儘管這並非必要。因此,對於一個自訂的外掛,你可以使用以下方式進行安裝

npm install less-plugin-myplugin

若要使用外掛,你可以透過簡單地撰寫以下內容,在命令列中傳遞它

lessc --myplugin

Less.js 會嘗試載入「less-plugin-myplugin」和「myplugin」模組作為外掛,只要有未知的 Less 選項(例如「myplugin」)。

您也可以明確指定外掛,方法如下

lessc --plugin=myplugin

若要傳遞選項給外掛,您可以用兩種方式之一來寫。

lessc --myplugin="advanced"
lessc --plugin=myplugin=advanced

透過 Less.js 載入外掛

在 Node 中,需要外掛並將其傳遞給 less 中的陣列作為選項外掛。例如

var LessPlugin = require('less-plugin-myplugin');
less.render(myCSS, { plugins: [LessPlugin] })
  .then(
    function(output) { },
    function(error) { }
  );

程式化使用

編輯「programmatic-usage」的標記原始碼

less 的主要進入點是 less.render 函數。格式如下

less.render(lessInput, options)
    .then(function(output) {
        // output.css = string of css
        // output.map = string of sourcemap
        // output.imports = array of string filenames of the imports referenced
    },
    function(error) {
    });

// or...

less.render(css, options, function(error, output) {})

選項引數是選填的。如果您指定一個回呼,那麼承諾將不會被傳回,而如果您沒有指定一個回呼,那麼承諾將會被提供。在幕後,回呼版本被使用,這樣可以減少同步使用的次數。

如果您想要呈現一個檔案,您會先將它讀取到一個字串中(傳遞給 less.render),然後將選項中的 filename 欄位設定為主要檔案的檔名。less 將會處理所有匯入的處理。

sourceMap 選項是一個物件,它讓您可以設定子原始碼地圖選項。可用的子選項有:sourceMapURLsourceMapBasepathsourceMapRootpathoutputSourceFilessourceMapFileInline。請注意,sourceMap 選項現在不適用於瀏覽器編譯器中的 less.js。

less.render(lessInput)
    .then(function(output) {
        // output.css = string of css
        // output.map = undefined
}
//,
less.render(lessInput, {sourceMap: {}})
    .then(function(output) {
        // output.css = string of css
        // output.map = string of sourcemap
}
//or,
less.render(lessInput, {sourceMap: {sourceMapFileInline: true}})
    .then(function(output) {
        // output.css = string of css \n /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJ..= */
        // output.map = undefined
}

取得日誌存取權

您可以使用以下程式碼新增一個日誌監聽器

less.logger.addListener({
    debug: function(msg) {
    },
    info: function(msg) {
    },
    warn: function(msg) {
    },
    error: function(msg) {
    }
});

注意:所有函式都是選填的。錯誤不會被記錄,而是傳遞回 less.render 中的回呼或承諾


協助 Less.js

編輯「developing-less」的標記原始碼

感謝您考慮協助!請仔細閱讀 協助說明,以避免浪費工作。

安裝這些工具

請確定路徑已設定。如果您啟動您最愛的命令列並輸入 node -v,您應該會看到 node 編譯器。如果您執行 phantomjs -v,您應該會看到 phantomjs 版本號碼。

  • 在本地複製您的 less.js 儲存庫
  • 導航到您本地的 less.js 儲存庫並執行 npm install,這會安裝 less 的 npm 相依性。

用法

Grunt 用於執行開發命令,例如測試、建置和基準測試。如果您已在全球安裝 grunt-cli,您可以使用 grunt [command_name] 執行它們,或使用 npm run grunt -- [command_name] 執行。

如果您前往 Less 儲存庫的根目錄,您應該可以執行 npm testnpm run grunt -- test 的便捷別名) - 這應該會執行所有測試。僅針對特定瀏覽器,執行 npm run grunt -- browsertest。如果您想針對檔案嘗試目前版本的 less,請在此執行 node bin/lessc path/to/file.less

若要偵錯瀏覽器測試,請執行 npm run grunt -- browsertest-server,然後前往 http://localhost:8088/tmp/browser/ 查看測試執行器頁面。

選用:若要取得目前版本的 Less 編譯器,請執行 npm -g install less - npm 是節點套件管理員,而「-g」會將其安裝為可全球使用的。

您現在應該可以執行 lessc file.less,如果有一個適當的 file.less,它將會被編譯並輸出到 stdout。然後您可以將它與在本地執行(node bin/lessc file.less)進行比較。

其他 grunt 命令

  • npm run grunt -- benchmark - 執行我們的基準測試以取得一些效能數字
  • npm run grunt -- stable 建立新版本
  • npm run grunt -- readme 在根目錄產生新的 readme.md(每次版本發布後)

如何在其他環境執行 Less

如果你查看 libs 資料夾,你會看到 lessless-nodeless-browserless 資料夾是純 javascript,沒有環境特定設定。如果你需要 less/libs/less,你會取得一個函式,它會取得環境物件和檔案管理員陣列。檔案管理員和可以寫成外掛程式的是同一個檔案管理員。

var createLess = require("less/libs/less"),
    myLess = createLess(environment, [myFileManager]);

環境 API 說明在 less/libs/less/environment/environment-api.js,檔案管理員 API 說明在 less/libs/less/environment/file-manager-api.js

對於檔案管理員,我們強烈建議將原型設定為新的 AbstractFileManager - 這讓你覆寫所需內容,並讓我們在不中斷現有檔案管理員的情況下實作新函式。檔案管理員範例,請參閱 2 個節點實作、瀏覽器實作或 npm 匯入外掛程式實作。

指南

如果您查看 http://www.gliffy.com/go/publish/4784259,這是一個 less 工作原理的概觀圖。警告!它需要使用 v2 變更進行更新。