LESS - 插件

上一个

测验

下一个

在本章中，我们将了解如何上传 Plugin 来扩展网站的功能。Plugins 可以用来让你的工作更轻松。

命令行

要使用命令行安装 plugin，首先需要安装 lessc plugin。plugin 可以使用 less-plugin 在开始时安装。以下命令行将帮助你安装 clean-css plugin −

npm install less-plugin-clean-css

直接使用已安装的 plugin，可以运行以下命令 −

lessc --plugin = path_to_plugin = options

在代码中使用 Plugin

在 Node 中，需要 require plugin，并将其作为选项 plugin 以数组形式传递给 less。

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

在浏览器中

在 less.js 脚本之前，plugin 作者应该在页面中包含 javascript 文件。

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

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

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

Less Plugins 列表

下表列出了 LESS 中可用的 plugins。

后处理器/功能 Plugins

序号	Plugins & 描述
1	Autoprefixer 用于在从 LESS 翻译为 CSS 后添加前缀。
2	CSScomb 有助于改善你的 stylesheet 的维护性。
3	clean-css 压缩 LESS 生成的 CSS 输出。
4	CSSWring 压缩或最小化 LESS 生成的 CSS 输出。
5	css-flip 用于生成从左到右 (LTR) 或从右到左 (RTL) 的 CSS。
6	functions 在 LESS 本身中编写 LESS 的 function。
7	glob 用于导入多个文件。
8	group-css-media-queries 对 Less 进行后处理。
9	inline-urls 自动将 URL 转换为 data uri。
10	npm-import 从 npm package 为 less 导入。
11	pleeease 用于对 Less 进行后处理。
12	rtl LESS 从 ltr (左到右) 反转为 rtl (右到左)。

框架/库 Importers

序号	Importers & 描述
1	Bootstrap Bootstrap LESS 代码在自定义 LESS 代码之前导入。
2	Bower Resolve 从 Bower packages 导入 LESS 文件。
3	Cardinal CSS for less.js 在自定义 LESS 代码之前，导入 Cardinal 的 LESS 代码。
4	Flexbox Grid 最常用的 Framework 或 library importer。
5	Flexible Grid System 导入 Flexible Grid System。
6	Ionic 导入 ionic framework。
7	Lesshat 导入 Lesshat mixins。
8	Skeleton 导入 skeleton less 代码。

Function Libraries

序号	Importers & 描述
1	advanced-color-functions 用于找到更对比鲜明的颜色。
2	cubehelix 使用 gamma correction 值 1，cubehelix function 可以返回两种颜色之间的颜色。
3	lists 这个 lists 操作函数库。

针对 Plugin 作者

LESS 允许作者与 less 结合。

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

pluginManager 提供了一个容器，可以添加 file managers、post processors 或 visitors。
setOptions function 传递字符串。
printUsage function 用于解释选项。

笙亿网络策划

Less 插件怎么用？Less 中插件的安装和配置方法有哪些？