Less.js Mixins Mixin Guards

Last Updated : 16 Oct, 2022

LESS is a Leaner Style Sheets, a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that the web browser can use it. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.

Mixins in less: Mixins in LESS, along with understanding their implementation & usage through the example. A CSS preprocessor is a program that generates the CSS code by using the defined preprocessor ruleset & facilitates reducing the overall complexity of CSS code. LESS is a CSS preprocessor that is a CSS backward-compatible language extension. Mixins in LESS, are a way to include a bunch of CSS properties from one ruleset to another i.e multiple times in the same file.

Mixin Guards: If you want to match simple values or a number of arguments on expressions, then you can use guards. It is associated with a mixin declaration and includes a condition that is attached to a mixin. Each mixin will have one or more guards which are separated by a comma; a guard must be enclosed within parentheses. LESS uses guarded mixins instead of if/else statements and performs calculations to specify matched mixin.

Different types of mixin guards:

Guard Comparison Operators

Parameter: You can use the comparison operator (=) to compare numbers, strings, identifiers, etc. There are some comparison operators usable in guards: >, >=, =, =<. Additionally, the keyword true is the only truthy value, making these two mixins equivalent.

Guard Logical Operators:

Parameter: You can use keywords to work around logical operators with guards.

Type Checking Functions: It contains the built-in functions to determine the value types for matching mixins.

Mixin guards:

Syntax:

.p-style(@size) when (@size<=50){
   font-size: @size;
   color:green;   
}

Example 1: The following example, demonstrates the use of mixin guards.

HTML

<!doctype html> 
<head> 
     <title>Mixin Guards</title> 
     <link rel="stylesheet" href="style.css" 
           type="text/css" /> 
</head> 
  
<body><br><br> 
    <h1><b>GeeksforGeeks</b></h1> 
    <h2>Learning Mixin Guards...</h2> 
</body> 
</html>

style.less: Create a less file.

CSS

.p-style(@size) when (@size<=50){ 
    font-size: @size; 
    color:green;     
} 
.p-style(@size) when (@size>50){ 
    font-size: @size; 
    color:blue; 
} 
h1{ 
    .p-style(40px); 
} 

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

CSS

h1 { 
    font-size: 40px; 
    color: green; 
}

Output:

Example 2: The following example demonstrates the use of mixin guards.

HTML

<!doctype html> 
    <head> 
        <title>Mixin Guards</title> 
        <link rel="stylesheet" href="style.css" 
              type="text/css" /> 
    </head> 
  
    <body> 
        <h1 class="cont1">GeeksforGeeks</h1> 
        <h3 class="cont2">Learning Mixin Guards...</h3> 
    </body> 
</html>

style.less: Creates the less file

CSS

.One (@primary) when (lightness(@primary) >= 50%) { 
    font-size: 50px; 
 } 
   
 .One (@primary) when (lightness(@primary) < 50%) { 
    font-size: 40px; 
 } 
   
 .One (@primary) { 
    color: @primary; 
 } 
   
 .cont1 { 
    text-align: center; 
    .One(green) 
 } 
   
 .cont2 { 
    text-align: center; 
    .One(black) 
 }

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

CSS

.cont1 { 
    text-align: center; 
    font-size: 40px; 
    color: green; 
} 
.cont2 { 
    text-align: center; 
    font-size: 40px; 
    color: black; 
} 