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 函数用于解释选项。

打印页面