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