Thursday, August 28, 2025
HomeLanguagesJavascriptLess.js Mixins Mixin Guards

Less.js Mixins Mixin Guards

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>neveropen</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">neveropen</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;
}


Output:

 

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
Dominic
Dominichttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,
RELATED ARTICLES

Most Popular

Dominic
32236 POSTS0 COMMENTS
Milvus
80 POSTS0 COMMENTS
Nango Kala
6609 POSTS0 COMMENTS
Nicole Veronica
11779 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11828 POSTS0 COMMENTS
Shaida Kate Naidoo
6719 POSTS0 COMMENTS
Ted Musemwa
7002 POSTS0 COMMENTS
Thapelo Manthata
6678 POSTS0 COMMENTS
Umr Jansen
6690 POSTS0 COMMENTS