Less.js Misc default() Function
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;
}
.c 1 {
width : 400px ;
height : 200px ;
margin : 1 rem;
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 ;
}
.c 1 {
width : 400px ;
height : 200px ;
margin : 1 rem;
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;
}
.c 1 {
width : @w;
height : 200px ;
margin : 1 rem;
background-color : @light;
}
.c 2 {
width : @w;
height : 200px ;
margin : 1 rem;
background-color : @dark;
}
.p 1 {
padding : 60px 0px 0px 80px ;
.mixin(@light);
}
.p 2 {
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;
}
.c 1 {
width : 300px ;
height : 200px ;
margin : 1 rem;
background-color : #fdff92 ;
}
.c 2 {
width : 300px ;
height : 200px ;
margin : 1 rem;
background-color : hsl( 25 , 71% , 8% );
}
.p 1 {
padding : 60px 0px 0px 80px ;
color : hsl( 25 , 71% , 8% );
}
.p 2 {
padding : 60px 0px 0px 80px ;
color : #fdff92 ;
}
|
Output:
Reference: https://lesscss.org/functions/#misc-functions-default
Last Updated :
06 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...