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; 
} 
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
    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; 
} 
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
    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; 
} 
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
    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; 
} 
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
} 
p { 
    padding: 50px 0px 0px 50px; 
    color: #fdff92; 
} 