Less.js @plugin At-Rules Pre-Loaded Plugins

Less.js is a powerful preprocessor that extends the functionality of CSS by adding programming constructs, such as variables, mixins, and functions. One of the key features of Less.js is the ability to create and use plugins that can be added to a Less.js stylesheet to provide additional functionality. One type of plugin that is particularly useful is the At-Rules pre-loaded plugin, which provides a way to define and use custom at-rules in Less.js.

Description: At-Rules pre-loaded plugins allow you to define custom at-rules in Less.js and use them in your stylesheets. At-rules are special directives that are used to define various types of rules in CSS, such as media queries, keyframe animations, and font-face declarations. With At-Rules Pre-Loaded Plugins, you can define your own custom at-rules that can be used in the same way as the built-in at-rules in CSS.

Parameters: The At-Rules pre-loaded plugins have several parameters that you can use to customize the behavior of your custom at-rules. Some of the most commonly used parameters include:

• @plugin: This parameter is used to specify the name of the plugin that you want to use. You can use this parameter to specify the name of a pre-existing plugin or to create a new plugin.
• @import: This parameter is used to specify the location of a stylesheet that contains the plugin that you want to use. You can use this parameter to load a plugin from a remote server or to load a local plugin.
• @arguments: This parameter is used to pass arguments to your custom at-rule. You can use this parameter to define variables that can be used within your at-rule.

Syntax:

@plugin "plugin-name";
.custom-at-rule(@arg1: value1, @arg2: value2) {
    // At-rule contents here
}

Note: 

• “plugin-name” is the name of the plugin that you want to use, and “.custom-at-rule” is the name of your custom at-rule.
•  The arguments @arg1 and @arg2 are optional and can be used to pass values to your at-rule.

There are two examples of how to use At-Rules Pre-Loaded Plugins in Less.js:

Example 1: This defines a custom at-rule for centering elements. In this example, we define a custom at-rule called “.center” that can be used to center elements on a page. We specify two optional arguments for the width and height of the element and use these values to calculate the margins needed to center the element. We then apply this custom at-rule to a “.my-element” class to center it on the page.

CSS

@plugin "center";
.center(@width: 100px, @height: 100px) {
     position: absolute;
     top: 50%;
     left: 50%;
     width: @width;
     height: @height;
     margin-top: -(@height / 2);
     margin-left: -(@width / 2);
}

.my-element {
     .center(200px, 200px);
}

Output:

.my-element {
     position: absolute;
    top: 50%;
    left: 50%;
     width: 200px;
     height: 200px;
     margin-top: -100px;
     margin-left: -100px;
}

Example 2: Define a custom at-rule for creating a grid system. In this example, we define a custom at-rule called “.grid” that can be used to create a flexible grid system. We specify two optional arguments for the number of columns and the margin between grid items and use these values to calculate the width and spacing of each grid item. We then apply this custom at-rule to a “.my-grid” class to create a grid with 3 columns.

CSS

@plugin "grid";
.grid(@columns: 12, @margin: 10px) {
      display: flex;
      flex-wrap: wrap;
      margin: -@margin;
      > * {
        flex-basis: calc((100% / @columns) - (2 * @margin));
        margin: @margin;
      }
}

.my-grid {
   .grid(3);
}

Output:

.my-grid {
     display: flex;
     flex-wrap: wrap;
     margin: -10px;
}
.my-grid > * {
     flex-basis: calc((100% / 3) - (2 * 10px));
     margin: 10px;
}