Less.js Misc default() Function

Last Updated : 26 Apr, 2025

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. LESS is adaptable, so it works with a wide range 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.

In this article, we are going to discuss the Misc default() function, which can be used only inside guard conditions. It returns a “true” value if no other mixin matched the conditions and “false” if any other matches. By default, it has a “true” value and it is used to give a true valued condition as an alternative. When the default function is used outside of the mixin guard condition, it is treated as standard CSS.

Syntax:

default()

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

Example 1: The code below demonstrates the usage and implementation of the Misc default() function and parametric mixin.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="style.css" /> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Less.js Misc default() Function</h3> 
    <div class="c1"> 
        <p> 
            <strong> 
                .mixin(@p, @color) when (default()) 
                <br>.mixin(@param, @light); 
            </strong> 
        </p> 
    </div> 
</body> 
  
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@param: italic; 
  
.mixin(@p, @color) when (default()) { 
    font-style: @p; 
    color: @color; 
} 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 400px; 
    height: 200px; 
    margin: 1rem; 
    background-color: @dark; 
} 
  
p { 
    padding: 60px 0px 0px 80px; 
    .mixin(@param, @light); 
}

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

lessc style.less style.css

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

CSS

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 400px; 
    height: 200px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
} 
  
p { 
    padding: 60px 0px 0px 80px; 
    font-style: italic; 
    color: #fdff92; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Misc default() function and usage of the multiple default() stage.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="style.css" /> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Less.js Misc default() Function</h3> 
    <div class="box"> 
        <div class="c1"> 
            <p class="p1"> 
                <strong> 
                    .mixin(@color) when (iscolor(@color)) 
                    <br> and (default()) 
                </strong> 
            </p> 
        </div> 
        <div class="c2"> 
            <p class="p2"> 
                <strong> 
                    .mixin(@pix) when (ispixel(@pix)) 
                    <br>and (default()) 
                </strong> 
            </p> 
        </div> 
    </div> 
</body> 
  
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@w: 300px; 
  
.mixin(@color) when (iscolor(@color)) and (default()) { 
    color: @dark; 
} 
  
.mixin(@pix) when (ispixel(@pix)) and (default()) { 
    color: @light; 
} 
  
body { 
    background-color: @body-bg-color; 
} 
  
.box { 
    display: flex; 
} 
  
.c1 { 
    width: @w; 
    height: 200px; 
    margin: 1rem; 
    background-color: @light; 
} 
  
.c2 { 
    width: @w; 
    height: 200px; 
    margin: 1rem; 
    background-color: @dark; 
} 
  
.p1 { 
    padding: 60px 0px 0px 80px; 
    .mixin(@light); 
} 
  
.p2 { 
    padding: 60px 0px 0px 80px; 
    .mixin(@w); 
}

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

lessc style.less style.css

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

CSS

body { 
    background-color: #eeeeee; 
} 
  
.box { 
    display: flex; 
} 
  
.c1 { 
    width: 300px; 
    height: 200px; 
    margin: 1rem; 
    background-color: #fdff92; 
} 
  
.c2 { 
    width: 300px; 
    height: 200px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
} 
  
.p1 { 
    padding: 60px 0px 0px 80px; 
    color: hsl(25, 71%, 8%); 
} 
  
.p2 { 
    padding: 60px 0px 0px 80px; 
    color: #fdff92; 
}