LESS - Plugins

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

Command Line

To install plugin using command line, you first need to install the lessc plugin. The plugin can be installed using less-plugin at the beginning. The following command line 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 lists 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-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).

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

Function Libraries

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.

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.

Advertisements