Less - Plugins

Plugin can be uploaded to expand the functionality of the site. Plugins are 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. Below is command line to install the clean-css plugin:

npm install less-plugin-clean-css

If an unrecognised option is mentioned then it will try to load that option and give an message saying no input files. For instance:

lessc --clean-css="advanced"

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

Following are the list of plugins available in LESS.

Postprocessor/Feature Plugins

S.N.	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 minify 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 Writes the function of LESS in the LESS itself.
7	glob Using the glob expression, multiple files can be imported.
8	group-css-media-queries It has ability to do post-processed for less.
9	inline-urls Automatically converts the URL to data uri.
10	npm-import It has ability to import 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

S.N.	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, import the LESS code for Cardinal.
4	Flexbox Grid flexboxgrid is imported.
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

S.N.	Importers & Description
1	advanced-color-functions It is used to find more contrasting color.
2	cubehelix Using gamma correction value of 1, the cubehelix function can return a color between the two colors.
3	lists 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.

---