1. 程式人生 > >Less簡介及簡單用法

Less簡介及簡單用法

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

可以執行在 Node、瀏覽器和 Rhino 平臺上。

安裝

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

全域性使用less:

npm install less -g

如果你不在全域性使用編譯器,那麼你可以:

npm i less --save-dev

命令列用法 1

安裝 Less 後,就可以在命令列上呼叫 Less 編譯器了,如下:

$ lessc styles.less

這將輸出編譯之後的 CSS 程式碼到 stdout

,你可以將輸出重定向到一個檔案:

$ lessc styles.less > styles.css

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

幫助

lessc --help

lessc --h

路徑

lessc --include-path=PATH1;PATH2

使用此來配置較少使用的路徑列表,以查詢匯入的路徑。

在node,設定路徑選擇:

{ paths: ['PATH1', 'PATH2'] }

Makefile2

lessc -Mlessc --depends

No Color

lessc --no-color

不相容IE

lessc --no-ie-compat

禁用JavaScript

lessc --no-js

Lint 3

lessc --lint

lessc --l

Silent

lessc -slessc --silent

Strict Imports

lessc --strict-imports

允許安全的HTTPS主機

lessc --insecure

版本

lessc -v
lessc --version

壓縮

lessc -x
lessc --compress 

程式碼中使用

可以像下面這樣在程式碼中呼叫 Less 編譯器(Node 平臺)。

var less = require('less');

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

輸出結果為:

.class {
  width: 2;
}

Rhino命令列

命令列 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 是最容易的方式,並且在開發階段很方便,但是,在生產環境中,效能和可靠性非常重要,我們建議最好使用 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 樣式表文件,每個檔案都會被單獨編譯。

瀏覽器選項

<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 Web Development Essentials, by Bass Jobsen, Foreword by Alexis Sellier

註釋:

1、less.js用法:http://www.runoob.com/manual/lessguide/usage/#command-line-usage-installing-lessc-for-use-globally

2、Makefile:一個工程中的原始檔不計其數,其按型別、功能、模組分別放在若干個目錄中,makefile定義了一系列的規則來指定,哪些檔案需要先編譯,哪些檔案需要後編譯,哪些檔案需要重新編譯,甚至於進行更復雜的功能操作,因為 makefile就像一個Shell指令碼一樣,其中也可以執行作業系統的命令。

3、Lint:lint是最著名的C語言工具之一,是由貝爾實驗室SteveJohnson於1979在PCC(PortableC Compiler)基礎上開發的靜態程式碼分析,一般由UNIX系統提供。與大多數C語言編譯器相比,lint可以對程式進行更加廣泛的錯誤分析,是一種更加嚴密的編譯工具。最初,lint這個工具用來掃描C原始檔並對源程式中不可移植的程式碼提出警告。