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
Silentlessc -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原始檔並對源程式中不可移植的程式碼提出警告。