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 中可用的插件。

后处理器/功能插件

Sr.No. 插件和描述
1 Autoprefixer

用于在从 LESS 翻译后为 CSS 添加前缀。

2 CSScomb

有助于改善样式表的维护。

3 clean-css

它会缩小 LESS 的 CSS 输出。

4 CSSWring

它会压缩或缩小 LESS 的 CSS 输出。

5 css-flip

它用于从左到右 (LTR) 或从右到左(RTL)。

6 functions

它将LESS的函数写在LESS本身中。

7 glob

用于导入多个文件。

8 group-css-media-queries

它对 Less 进行后期处理。

9 inline-urls

自动将 URL 转换为数据 uri。

10 npm-import

它从 npm 导入打包 less。

11 pleeease

用于对 Less 进行后处理。

12 rtl

LESS 从 ltr(从左到右)反转为 rtl(从右到左)。

框架/库导入器

Sr.No. 导入器和描述
1 Bootstrap

在自定义 LESS 代码之前导入 Bootstrap LESS 代码。

2 Bower Resolve

从 Bower 包导入 LESS 文件。

3 less.js 的 Cardinal CSS

在自定义 LESS 代码之前,导入了 Cardinal 的 LESS 代码。

4 Flexbox Grid

最常导入的框架或库导入器。

5 Flexible Grid System

它导入了 Flexible Grid系统。

6 Ionic

它导入了 ionic 框架。

7 Lesshat

它导入了 Lesshat mixins。

8 Skeleton

它导入无骨架代码。

函数库

Sr.No. 导入器和描述
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 函数用于解释选项。