📜  LESS-插件

📅  最后修改于: 2020-10-22 08:04:17             🧑  作者: Mango


 

在本章中,我们将了解如何上传插件以扩展站点的功能。插件可用于简化您的工作。

命令行

要使用命令行安装插件,首先需要安装lessc插件。可以在一开始使用less-plugin安装该插件。以下命令行将帮助您安装clean-css插件-

npm install less-plugin-clean-css

您可以直接使用以下命令来使用已安装的插件-

lessc --plugin = path_to_plugin = options

使用插件代码

在Node中,该插件是必需的,并且作为可选插件传递给数组。

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

在浏览器中

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






较少的插件列表

下表列出了LESS中可用的插件。

后处理器/功能插件

Sr.No. Plugins & Description
1 Autoprefixer

It is used to add prefixes to CSS after translation from LESS.

2 CSScomb

It helps to improve the maintenance of your stylesheet.

3 clean-css

It minifies the CSS output from LESS.

4 CSSWring

It compresses or minify the CSS output from LESS.

5 css-flip

It is used to generate the CSS from left-to-right(LTR) or right-to-left(RTL).

6 functions

It writes the function of LESS in the LESS itself.

7 glob

It is used to import multiple files.

8 group-css-media-queries

It does the post-processing for Less.

9 inline-urls

Automatically converts the URL to data uri.

10 npm-import

It imports from npm package for less.

11 pleeease

It is used to postprocess Less.

12 rtl

LESS is reversed from ltr(left-to-right) to rtl(right-to-left).

框架/图书馆进口商

Sr.No. Importers & Description
1 Bootstrap

Bootstrap LESS code is imported before the custom LESS code.

2 Bower Resolve

LESS files are imported from the Bower packages.

3 Cardinal CSS for less.js

Before the custom LESS code, the LESS code for Cardinal is imported.

4 Flexbox Grid

Most commonly imported Framework or library importer.

5 Flexible Grid System

It imports the Flexible Grid System.

6 Ionic

It imports the ionic framework.

7 Lesshat

It imports the Lesshat mixins.

8 Skeleton

It imports the skeleton less code.

功能库

Sr.No. Importers & Description
1 advanced-color-functions

It is used to find more contrasting colors.

2 cubehelix

Using gamma correction value of 1, the cubehelix function can return a color between the two colors.

3 lists

This lists manipulation functions library.

对于插件作者

LESS允许作者少加组合。

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}
  • pluginManager提供了一个持有人,可以添加文件管理器,后处理器或访问者。
  • setOptions函数传递字符串。
  • printUsage函数用于解释选项。