Less.js Mixins Parametric Mixins

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS uses a dynamic style sheet language, it is more beneficial. Because of LESS’ adaptability, it may be used by numerous different browsers. CSS must be created and improved using a computer language known as the CSS pre-processor in order for web browsers to use it. Along with providing tools like variables, functions, mixins, and operations to help construct dynamic CSS while maintaining backward compatibility, it is also a CSS language extension.

Mixins in less: Mixins in LESS, along with understanding their implementation & usage through the example. A CSS preprocessor is a tool that creates CSS code using the preprocessor ruleset supplied by the user and helps to simplify CSS code in general. A CSS language extension that is backward-compatible is called LESS. In LESS, mixins are a technique to incorporate a number of CSS properties from one ruleset to another, or more than once in the same file.

Parametric Mixins: This is a process of defining mixins where we can give arguments to them. We can pass predefined values as arguments while calling a mixin. 

Different ways to pass parameters in the mixins:

1. Default argument passing: This is the basic way of passing the argument where we can add the argument while defining the mixin and pass the value while calling the mixin.

Syntax:

.mixin_name(@var_name1; @var_name2:some){
   ...
}

2. Overloading mixins: We can overload the mixins with more, less, or different parameters inside the mixin. For understanding more about overloading refer to Function Overloading in JavaScript 

Syntax:

.mixin_name(@var_name1) {
       ...
}
.mixin_name(@var_name1; @var_name2:some) {
      ...
}

3. Named Parameters: By using their names, mixins offer parameter values rather than their places. The values can be inserted into parameters in any sequence, and they can be referred to by name. Named parameters produce explicit codes that are simpler to read.

Syntax:

.mixin_name(@var_name1: value_1; @var_name2:value_2) {
       ...
}

 4. Passing them in @arguments variable: When passing the arguments we can specify all the arguments passed as the @arguments variable inside the mixin. 

Syntax:

.mixin_name(@var_1: value_1; @var_2:value_2; @var_3:value_3){
    property: @arguments //all the argument values
}

Example 1: The code below demonstrates the usage and implementation of the Mixins Parametric Mixins and @arguments variable.

style.less:

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be: 

style.css:

Output:

 

Example 2: The code below demonstrates the usage and implementation of the Mixins Parametric Mixins and Mixin overloading.

style.less:

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be: 

style.css:

Output:

 

Reference: https://lesscss.org/features/#mixins-feature-mixins-parametric-feature