Less.js @plugin At-Rules

In this article, we will understand the concepts related to Less.js @plugin At-Rules with different illustrations and examples. Less.js @plugin At-Rules is used to import the JavaScript plugin to add additional functions and features. Basically using the @plugin at rule is similar to an @import for our Less files, it just imports the plugins and adds less.js functions. Plugins are written in JavaScript and are an effective way to add custom functionality to the CSS. It makes our CSS more efficient and flexible. 

• Writing your first plugin: To create a custom plugin in Less.js, the developer needs to define a new object that contains a method for manipulating style sheets. This is a custom-made plugin so we can modify it as per our needs. By this, we can modify values, transform styles, and return new styles. We will understand this with the example given below.
• Plugin Scope: The plugin scope determines where the plugin is accessible. It defines the accessibility of the plugin to the stylesheet and it helps us to avoid naming conflicts.
• Null functions: Less.js null functions let plugins return values that are not handled by Less.js. This is helpful for the plugins that don’t want to give output instead it is only used for storing the data and later on we can retrieve the data if we want.
• The Less.js Plugin Object: The Less.js plugin object is a predefined object with properties and methods for modifying styles. When it is used in the plugin it allows us to access the stylesheet and change its properties. Some plugin objects are:
• Pre-Loaded Plugins: The easiest way to load the plugin can be done using @plugin but there are times when we need to use plugins that are available and can be used directly. Some plugins are pre-loaded into Less.js and are available to get installed and used directly.

Syntax:

@plugin "plugin-name";
.property {
    value: plugin(arguments);
}
// It will automatically append .js file extension
// if there is no extension is given

Before using @plugin we need to install Less so to install less follow the commands given below:

Step 1: Create a Folder.

mkdir plugins

Step 2: Go to the created folder and initialize npm.

npm init

Step 3: Install Less using npm.

npm install less -g

Project Structure

Example 1: In this example, we will make a plugin that calculates the PI value and import the plugin in the less file.

Step 1: Make a file named ‘new-plugin.js’ and write the code in the file given below.

new-plugin.js:

Javascript

registerPlugin({
    install: function (less, pluginManager, functions) {
        functions.add('pi', function () {
            return Math.PI;
        });
    }
})

Step 2: Create a main.less file and write the code in it that is given below.

main.less:

Javascript

@plugin 'new-plugin';
.show-me-pi {
    value: pi();
}

Output: First, we need to compile the main.less file in order to get the CSS code or we can simply show the output in plain text in the command line. Follow the commands below to get the output.

lessc main.less

or

lessc main.less main.css

Use the above command to get the output in the CSS code file. After running the above command a new file is get created which is the main.css file.

Example 2: In this example, we are going to optimize and minify CSS code using Clean-CSS. Clean-CSS is a Pre-loaded plugin that is already available and we need to just download it in order to use it.

Clean-CSS plugin: This is a pre-loaded plugin that optimizes and minifies CSS code, resulting in smaller file sizes and faster website load times.

Install clean-css using npm:

npm install clean-css

styles.less

Javascript

// @import "./node_modules/clean-css/lib/clean.js";
// new
.some-class {
    background-color:green;
    height: 250px;
    width: 250px;
}

As we can see that the styles.less are unorganized and have multiple comments that basically increase the size of the CSS file. In this case, clean-css plugin works. 

index.js

Javascript

var less = require('less');
fs = require('fs');
var CleanCSS = require('./node_modules/clean-css');

var myCSS = '@import "styles.less";';

less.render(myCSS, { plugins: [new CleanCSS()] })
    .then(
        function (output) {
            fs.writeFile('styles.css', output.css, function (err) {
                if (err) {
                    console.log(err);
                } else {
                    console.log('CSS file has been saved.');
                }
            });
        },
        function (error) {
            console.log(error);
        }
    );

index.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
          Box
      </div>
</body>
</html>

Compiled CSS output:

CSS

.box {
    background-color: green;
    height: 250px;
    width: 250px;
}

Output: Run the command given below in the terminal.

node index.js

Now you can open the HTML file(we are using an HTML file for just showing the output on the screen) using the live server or directly we can directly open the index.html file shown below.

Reference: https://lesscss.org/usage/#plugins