LESS - Plugins

In this chapter, we will understand how a Plugin can be uploaded to expand the functionapty of the site. Plugins can be used to make your work easier.

Command Line

To install plugin using command pne, you first need to install the lessc plugin. The plugin can be installed using less-plugin at the beginning. The following command pne will help you install the clean-css plugin −

npm install less-plugin-clean-css

Directly, you can use the installed plugin by using the following command −

lessc --plugin = path_to_plugin = options

Using a Plugin in Code

In Node, the plugin is required and it is pass in an array as an option plugin to the less.

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

In the Browser

Before the less.js script, the plugin author should include the javascript file in the page.

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

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

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

List of Less Plugins

The following table psts out the plugins available in LESS.

Postprocessor/Feature Plugins

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-fpp 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	inpne-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).

Framework/Library Importers

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 pbrary 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.

Function Libraries

Sr.No.	Importers & Description
1	advanced-color-functions It is used to find more contrasting colors.
2	cubehepx Using gamma correction value of 1, the cubehepx function can return a color between the two colors.
3	psts This psts manipulation functions pbrary.

For Plugin Authors

LESS allow an author to combine with less.

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

pluginManager provides a holder which can add file managers, post processors or visitors.

setOptions function passes the string.

printUsage function is used to explain the options.