Less.js Mixins Selectors in Mixins

Last Updated : 03 Nov, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. Because LESS is adaptable, it can be used by a variety of browsers. Only CSS that has been created and processed using the CSS pre-processor, a computer language, can be used by web browsers. In addition to providing capabilities like variables, functions, mixins, and operations to help create dynamic CSS while maintaining backward compatibility, it is a CSS language extension.

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.

Selectors in Mixins signify that mixins are not just a way to add up properties but also we can add selectors in mixin and the mixin selectors will be also compiled when the mixin is compiled with all its properties.

Syntax:

.mixin_name() {
    & selector {
        ...
    }
}
element/class/id {
  .mixin_name();
}

Please refer to the Compile LESS into CSS. article for a detailed description of the installation procedure.

Example 1: The code below demonstrates the usage and implementation of the Mixins Selectors in Mixins and :hover selector.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Less.js Mixins Selectors in Mixins</h3> 
    <div class="c1"> 
        <p> 
            .mixin() 
            <br>{ 
            <br> :hover Selector 
            <br>} 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(255, 109, 72); 
@light2: rgb(255, 189, 173); 
  
.mixin_1() { 
    &:hover { 
        color: @light2; 
        padding: 50px 0px 0px 140px; 
        transition: color 2s, padding 2s; 
    } 
} 
  
.mixin_2() { 
    &:hover { 
        width: 400px; 
        height: 200px; 
        transition: width 2s, height 2s; 
    } 
} 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 300px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @dark; 
    transition: width 2s, height 2s; 
    .mixin_2(); 
} 
  
p { 
    padding: 30px 0px 0px 70px; 
    color: @light; 
    transition: color 2s, padding 2s; 
    .mixin_1(); 
}

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

lessc styles.less styles.css

styles.css: The compiled CSS file comes to be:

CSS

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 300px; 
    height: 150px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
    transition: width 2s, height 2s; 
} 
  
.c1:hover { 
    width: 400px; 
    height: 200px; 
    transition: width 2s, height 2s; 
} 
  
p { 
    padding: 30px 0px 0px 70px; 
    color: #ff6d48; 
    transition: color 2s, padding 2s; 
} 
  
p:hover { 
    color: #ffbdad; 
    padding: 50px 0px 0px 140px; 
    transition: color 2s, padding 2s; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Mixins Selectors in Mixins and when the CSS guard added is matched multiple selectors are compiled.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Less.js Mixins Selectors in Mixins</h3> 
    <div class="c1"> 
        <p> 
            Go to 
            <br> 
            <a href="https://www.geeksforgeeks.org/"> 
                geeksforgeeks.com 
            </a> 
        </p> 
    </div> 
</body> 
  
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(255, 109, 72); 
@light2: rgb(255, 189, 173); 
  
.mixin_1() when (default()) { 
    &:hover { 
        color: yellow; 
        transition: color; 
    } 
  
    &:active { 
        color: white; 
        transition: color; 
    } 
} 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 300px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @dark; 
} 
  
p { 
    padding: 30px 0px 0px 70px; 
    color: @light2; 
} 
  
a { 
    .mixin_1(); 
    color: green; 
  
}

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

lessc styles.less styles.css

styles.css: The compiled CSS file comes to be:

CSS

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 300px; 
    height: 150px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
} 
  
p { 
    padding: 30px 0px 0px 70px; 
    color: #ffbdad; 
} 
  
a { 
    color: green; 
} 
  
a:hover { 
    color: yellow; 
    transition: color; 
} 
  
a:active { 
    color: white; 
    transition: color; 
}