Less.js Mixins With Parentheses

Last Updated : 18 Jan, 2023

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is preferable since CSS is a dynamic style sheet language. LESS can be utilized by many different browsers because it is versatile. Web browsers can only use CSS that has been developed and processed using a computer language known as the CSS pre-processor. It is a CSS language extension that also offers features like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while keeping backward compatibility.

Mixins in less: Mixins in LESS, along with understanding their implementation and usage through the example. By creating CSS code, based on the preprocessor ruleset of the user, a CSS preprocessor is a tool that aids in the simplification of CSS code. Backward-compatible CSS language extension, LESS is used. Multiple CSS properties can be combined from one ruleset or file to another using mixins which is a LESS technique.

Mixins With Parentheses is a way by which we will show mixin code in the compiled CSS file and only the compiled mixin calls are shown. This way we can ensure encapsulation of the mixin’s code and increase readability and security at the same time.

Syntax:

.mixin_name {
    ...
}
.class {
    .mixin_name();
}

Compile LESS into CSS.

Example 1: The code below demonstrates the usage and implementation of the Mixins With Parentheses.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" type="text/css"
          href="styles.css"/>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Mixins With Parentheses</b></h3>
    <div class="c1">  
        <p>
            <br>.mixin_1(){
                <br>padding: 40px 0px 0px 70px;
            <br>}
            <br>.mixin_2(){
                <br>color: @light2;
            <br>}
        </p>
    </div>
</body>
 
</html>

styles.less:

CSS

@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(255, 197, 72);
 
.mixin_1(){
    padding: 40px 0px 0px 70px;
}
.mixin_2(){
    color: @light;
}
body{
    background-color: @body-bg-color;
}
.c1 {
    width: 350px;
    height: 250px;
    margin: 1rem;
    background-color: @dark;
}
p {
    .mixin_1();
    .mixin_2();   
}

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

lessc styles.less styles.css

The compiled CSS file comes to be:

styles.css:

CSS

body {
    background-color: #eeeeee;
}
.c1 {
      width: 350px;
      height: 250px;
      margin: 1rem;
      background-color: hsl(25, 71%, 8%);
}
p {
      padding: 40px 0px 0px 70px;
      color: #ffc548;
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Mixins With Parentheses and CSS guards is added to the mixin and when the guard is matched, the mixin is implemented.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" type="text/css"
          href="styles.css"/>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Mixins With Parentheses</b></h3>
    <div class="c1">  
        <p>
            <p>
                <br>Mixin inside 
                <br>Parentheses is
                <br>called when Guard
                <br>is satisfied.
            </p>
        </p>
    </div>
</body>
</html>

styles.less:

CSS

@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(255, 197, 72);
.mixin_1() when (default()){
    padding: 40px 0px 0px 70px;
}
.mixin_2() when not (default()){
    color: @light;
}
.mixin_3() when (default()){
    color: @dark;
}
body{
    background-color: @body-bg-color;
}
.c1 {
    width: 350px;
    height: 250px;
    margin: 1rem;
    background-color: @light;
}
p {
    .mixin_1();
    .mixin_2();   
    .mixin_3();   
}

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

lessc styles.less styles.css

The compiled CSS file comes to be:

styles.css: The compiled CSS file is as follows.

CSS

body {
    background-color: #eeeeee;
}
.c1 {
     width: 350px;
    height: 250px;
    margin: 1rem;
    background-color: #ffc548;
}
p {
    padding: 40px 0px 0px 70px;
    color: hsl(25, 71%, 8%);
}