Less 是一門 CSS 預處理語言,它擴充了 CSS 語言,增加了諸如變量、混合(mixin)、函數等功能,讓 CSS 更易維護、方便制作主題、擴充。

Less 可以運行在 Node、瀏覽器和 Rhino 平臺上。網上有很多第三方工具幫助你編譯 Less 源碼。

實例:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

編譯結果

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Less 可以通過 npm 在命令行上運行;在瀏覽器上作為腳本文件下載;或者集成在廣大的第三方工具內。請參考 用法

安裝

在服務器端最容易的安裝方式就是通過 npm (node.js 的包管理器),方法如下:

$ npm install -g less

命令行用法:

安裝 Less 后,就可以在命令行上調用 Less 編譯器了,如下:

$ lessc styles.less

這將輸出編譯之后的 CSS 代碼到 stdout,你可以將輸出重定向到一個文件:

$ lessc styles.less > styles.css

若要輸出壓縮過的 CSS,只需添加 -x 選項。如果希望獲得更好的壓縮效果,還可以通過 --clean-css 選項啟用 Clean CSS 進行壓縮。

執行 lessc 且不帶任何參數,就會在命令行上輸出所有可用選項的列表。

代碼中使用

可以像下面這樣在代碼中調用 Less 編譯器(Node 平臺)。

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
  console.log(css);
});

輸出結果為:

.class {
  width: 2;
}

你還可以手動調用分析器(paser)和編譯器:

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'], // Specify search paths for @import directives
  filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {
  tree.toCSS({
    // Minify CSS output
    compress: true
  });
});

第三方工具

查看 用法 部分了解第三方工具的詳細信息。

Rhino 命令行

每個 less.js 發布版本同樣包含了 rhino-compatible 版本。

命令行 rhino 版本需要包含以下兩個文件:

  • less-rhino-.js - 編譯執行,
  • lessc-rhino-.js - 命令行支持

命令行執行編譯:

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

以上將編譯 styles.less 文件并保存為 styles.css 文件。 輸出文件的參數是可選的,如果沒有指定該參數,less將默認輸出到標準輸出中(stdout)。

客戶端用法

在瀏覽器上跑 less.js 非常方便開發,但是不推薦用于生產環境。

在客戶端使用 Less.js 是最容易的方式,并且在開發階段很方便,但是,在生產環境中,性能和可靠性非常重要, 我們建議最好使用 node.js 或其它第三方工具進行預編譯

那就開始吧,在頁面中加入 .less 樣式表的鏈接,并將 rel 屬性設置為 "stylesheet/less":

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

接下來,下載 less.js 并通過 <script></script> 標簽將其引入,放置于頁面的<head> 元素內:

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

提示

  • 務必確保在 less.js 之前加載你的樣式表。
  • 如果加載多個 .less 樣式表文件,每個文件都會被單獨編譯。因此,一個文件中所定義的任何變量、mixin 或命名空間都無法在其它文件中訪問 。

瀏覽器選項

<script src="less.js"></script> 之前 定義全局的 less 對象就可以為 Less.js 設置參數:

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

了解更多 瀏覽器選項

瀏覽器下載

下載 Less.js v1.7.3

Download source code

直接從 GitHub 上下載最新的 Less.js 源碼。

Clone or fork via GitHub

通過 GitHub 克隆或 fork 本項目!

通過 Bower 安裝

通過 Bower 安裝 Less.js 項目,可以使用以下命令:

bower install less

Less CDN

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>

Less.js 基于 Apache 2 許可證發布(我們打算將來采用雙許可證方式)。版權所有 2009-2014,Alexis Sellier 和 Less 核心小組(見上面)。總結如下:

賦予你的權力:

  • 任意下載并使用 Less.js 的全部或部分代碼,可以用于個人、公司內部或商業目的
  • 將 Less.js 包含到你的產品中

嚴禁:

  • 在沒有聲明版權歸屬的情況下使用 Less.js 中的任何代碼片段

你的義務:

  • 如果你的產品中包含 Less.js,必須包含一份 Less.js 的版權協議
  • 在你包含了 Less.js 的產品中明確聲明 Less.js 的版權歸 Less 核心小組

不需要:

  • 在你的產品中包含 Less。js 自身或你所修改的源碼
  • 提交你對 Less.js 所做的修改到 Less.js 項目(我們還是鼓勵提交對 Less.js 的改進)

完整的 Less.js 版權信息位于 項目倉庫內,請參考。