Less.js Type isruleset() Function
Last Updated :
07 Nov, 2022
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Given that CSS is a dynamic style sheet language, it is preferable. Since LESS is adaptable, it can be used by many different browsers. Only CSS that has been created and processed using a computer language known as the CSS pre-processor 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 will discuss the Type isruleset() function, whose function is to determine whether a value given is a ruleset or not. This function returns a boolean value i.e., true if the value is a ruleset and false if it is not.
Syntax:
isruleset(value)
Parameters:
- value: This is the only compulsory parameter for this function.
Return type: This method returns a boolean value.
Please refer to the how to pre-compile LESS into CSS article for a detailed description.
Example 1: The code below demonstrates the usage and implementation of the Type isruleset() function.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" type = "text/css"
href = "style.css" />
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >
< b >Less.js Type isruleset() Function</ b >
</ h3 >
< div class = "c1" >
< p >
boolean(isruleset(@rules))
< br >
TRUE
</ p >
</ div >
</ body >
</ html >
|
styles.less:
CSS
@body-bg- color : #eeeeee ;
@dark: hsl( 25 , 71% , 8% );
@light: rgb ( 253 , 255 , 146 );
@rules: {
padding : 50px 0px 0px 50px ;
color : if(@cond, @dark, @light);
};
@cond: boolean(isruleset(@rules));
body {
background-color : @body-bg-color;
}
.c 1 {
width : 350px ;
height : 150px ;
margin : 1 rem;
background-color : if(@cond, @light, @dark);
}
p {
@rules();
}
|
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
style.css: The CSS output of the above Less file was compiled.
CSS
body {
background-color : #eeeeee ;
}
.c 1 {
width : 350px ;
height : 150px ;
margin : 1 rem;
background-color : #fdff92 ;
}
p {
padding : 50px 0px 0px 50px ;
color : hsl( 25 , 71% , 8% );
}
|
Output:
Example 2: The code below demonstrates the usage and implementation of the Type isruleset() function when the ruleset has an internal mixin also included with the if and boolean logical functions.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" type = "text/css"
href = "style.css" />
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >< b >Less.js Type isruleset() Function</ b ></ h3 >
< div class = "c1" >
< p >
boolean(isruleset(@rules))
< br >
TRUE
</ p >
</ div >
</ body >
</ html >
|
styles.less:
CSS
@body-bg- color : #eeeeee ;
@dark: hsl( 25 , 71% , 8% );
@light: rgb ( 253 , 255 , 146 );
@rules: {
.mixin() {
padding : 50px 0px 0px 50px ;
color : if(@cond, @light, @dark);
}
};
@cond: boolean(isruleset(@rules));
body {
background-color : @body-bg-color;
}
.c 1 {
width : 350px ;
height : 150px ;
margin : 1 rem;
background-color : if(@cond, @dark, @light);
}
p {
@rules();
.mixin();
}
|
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
style.css: The CSS output of the above Less file was compiled.
CSS
body {
background-color : #eeeeee ;
}
.c 1 {
width : 350px ;
height : 150px ;
margin : 1 rem;
background-color : hsl( 25 , 71% , 8% );
}
p {
padding : 50px 0px 0px 50px ;
color : #fdff92 ;
}
|
Output:
Reference: https://lesscss.org/functions/#type-functions-isruleset
Share your thoughts in the comments
Please Login to comment...