快速入門

Less 是一種 CSS 預先處理器，意思是它擴展了 CSS 原本的功能，加入了新的功能像是允許使用變數，mixins 混合特性，函式和許多其他的技術使得 CSS 俱有更多的可維護性，根據功能切割檔案，可擴展性等等 Less 可以執行在 Node，瀏覽器與 Rhino。同時也有許多第三方的工具協助您建置編譯這些檔案。

範例:

@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

Less 有許多種使用方式，可以透過 npm 安裝其指令工具並且使用，透過瀏覽器下載運行腳本 script 或者是其他第三方的工具。查閱使用方式取得更多詳細資訊。

安裝

最簡單的伺服器端安裝方式就是透過 npm。node.js 套件管理工具，安裝方式如下:

$ npm install -g less

指令界面使用方式

一旦您安裝完成，您可以透過指令調用編譯器，指令如下:

$ lessc styles.less

上面的指令將會編譯輸出一個 CSS 到 stdout, 接著您就可以把這些內容導到任何一個您喜歡的檔案路徑:

$ lessc styles.less > styles.css

如果您要輸出壓縮的 CSS 檔案，比較簡單的方式是在使用指令時加入-x 參數。如果您想要操作更多關於壓縮的設定您可以參考Clean CSS搭配--clean-css 參數。

如果您想列出所有的參數您可以執行 lessc 不帶任何參數。

在程式碼中調用

您可以利用 node 調用編譯器:

var less = require('less');

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

如此一來將會渲染輸出

.class {
  width: 2;
}

您或許也想要手動呼叫解析器(parser)和編譯器:

var parser = new(less.Parser);

parser.parse('.class { width: (1 + 1) }', function (err, tree) {
  if (err) {
    return console.error(err)
  }
  console.log(tree.toCSS());
});

解析出樹狀結構物件可以協作您做更多的應用，下面為 parser 解析上面程式碼的 tree，而 toCSS 則是執行編譯的函式。

{ selectors: null,
  rules:
   [ { selectors: [Object],
       rules: [Object],
       _lookups: {},
       strictImports: undefined } ],
  _lookups: {},
  strictImports: undefined,
  root: true,
  firstRoot: true,
  toCSS: [Function] }

設定配置

當您想設定編譯器的參數時:

var parser = new(less.Parser)({
  paths: ['.', './lib'], // 指定搜尋 @import directives 的路徑
  filename: 'style.less' // 設定檔案名稱
});

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

第三方工具

查閱使用方式部分了解詳細資訊。

Rhino 環境下的指令使用方式

每一個 less.js 發佈版本同時包含 Rhino 相容的版本。

Rhino 版本的指令需要兩個檔案:

  • less-rhino-.js - compiler implementation,
  • lessc-rhino-.js - command line support.

執行編譯指令:

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

這一步將會編譯styles.less 檔案並且將結果儲存至styles.css。輸出檔案參數(檔名)是可選的。如果沒加參數結果就會輸出至stdout。

客戶端的使用方式

使用這種在瀏覽器引入編譯 js 檔案的方式在開發時非常方便，但不並推薦在產品上使用。

客戶端引入編譯 js 是學習與開發使用 Less 最簡單的方式，但是在用發佈的產品時，因為效能與程式的可靠性是非常重要的， 我們建議使用 node.js 者第三方工具預先編譯或。

要使用這種方式，您只要把.less 檔案直接在 html 引入，並且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>

注意事項

  • 請確認您匯入的樣式檔案在這支 script 之前 。
  • 當您匯入超過一個 .less 檔案時，每一個檔案將會獨立編譯。這意思是您定義在某一個樣式檔中的任何變數，mixins 或者命名空間是不能和另一個檔案互相存取的。

    特別注意的是這邊說的並非 @import 這種用法，@import 這種匯入方式仍然可以使用。

瀏覽器參數

如果需要定義瀏覽器的參數選項，方式是在載入 <script src="less.js"></script> 之前把它們定義到一個全域的 less 物件中:

參數提供一些額外的設定，例如:設定 debug 訊息協助，log 等級調整等等。

<!-- 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>

學習更多關於瀏覽器參數 Browser Options

取得 Less.js

使用瀏覽器下載

下載 Less.js v1.7.3

下載原始碼

直接透過 Github 下載取得最新版本 Less.js 程式原始碼。

使用 Github Clone 或 Fork

複製(Fork)專案與提交變更請求!

使用 Bower 安裝

使用 Bower 安裝 Less.js 請執行下列指令:

bower install less

Less CDN 

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

授權 FAQs

Less.js 的發佈是使用 Apache 2 License 方式授權(雖然有計劃使用雙重授權). Copyright 2009-2014, Alexis Sellier 和 Less 核心團隊。 歸納，描述情況為下列段落

It allows you to:

  • Freely download and use Less.js, in whole or in part, for personal, company internal or commercial purposes
  • Use Less.js in packages or distributions that you create

It forbids you to:

  • Redistribute any piece of Less.js without proper attribution

It requires you to:

  • Include a copy of the license in any redistribution you may make that includes Less.js
  • Provide clear attribution to The Less Core Team for any distributions that include Less.js

It does not require you to:

  • Include the source of Less.js itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Submit changes that you make to Less.js back to the Less.js project (though such feedback is encouraged)

完整的 Less.js 授權放置於 專案檔案庫