LESS - 外掛

本章將介紹如何上傳外掛以擴充套件網站的功能。外掛可以使你的工作更輕鬆。

命令列

要使用命令列安裝外掛，首先需要安裝 lessc 外掛。可以使用less-plugin 在開頭安裝外掛。以下命令列將幫助你安裝 clean-css 外掛：

npm install less-plugin-clean-css

可以直接使用以下命令使用已安裝的外掛：

lessc --plugin = path_to_plugin = options

在程式碼中使用外掛

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

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

在瀏覽器中

在 less.js 指令碼之前，外掛作者應在頁面中包含 javascript 檔案。

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

LESS 外掛列表

下表列出了 LESS 中可用的外掛。

後處理器/特性外掛

序號	外掛及說明
1	Autoprefixer 用於在從 LESS 轉換後向 CSS 新增字首。
2	CSScomb 幫助改進樣式表的維護。
3	clean-css 壓縮 LESS 生成的 CSS 輸出。
4	CSSWring 壓縮或縮小 LESS 生成的 CSS 輸出。
5	css-flip 用於從左到右 (LTR) 或從右到左 (RTL) 生成 CSS。
6	functions 在 LESS 本身中編寫 LESS 的函式。
7	glob 用於匯入多個檔案。
8	group-css-media-queries 對 Less 進行後處理。
9	inline-urls 自動將 URL 轉換為 data uri。
10	npm-import 從 npm 包匯入 less。
11	pleeease 用於後處理 Less。
12	rtl LESS 從 ltr（左到右）反轉為 rtl（右到左）。

框架/庫匯入器

序號	匯入器及說明
1	Bootstrap 在自定義 LESS 程式碼之前匯入 Bootstrap LESS 程式碼。
2	Bower Resolve 從 Bower 包匯入 LESS 檔案。
3	Cardinal CSS for less.js 在自定義 LESS 程式碼之前，匯入 Cardinal 的 LESS 程式碼。
4	Flexbox Grid 最常用的框架或庫匯入器。
5	靈活的網格系統匯入靈活的網格系統。
6	Ionic 匯入 ionic 框架。
7	Lesshat 匯入 Lesshat mixin。
8	Skeleton 匯入 skeleton less 程式碼。

函式庫

序號	匯入器及說明
1	advanced-color-functions 用於查詢更多對比色。
2	cubehelix 使用 1 的伽馬校正值，cubehelix 函式可以在兩種顏色之間返回一種顏色。
3	lists 這是一個列表操作函式庫。

面向外掛作者

LESS 允許作者與 less 結合使用。

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

pluginManager 提供了一個持有者，可以新增檔案管理器、後處理器或訪問者。
setOptions 函式傳遞字串。
printUsage 函式用於解釋選項。

列印頁面