Less.js Type isunit() Function

Last Updated : 02 Nov, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS uses a dynamic style sheet language, it is more beneficial. Due to LESS adaptability, it may be used by numerous different browsers. CSS must be created and improved using a computer language known as the CSS pre-processor in order for web browsers to use it. Additionally, it is a CSS language extension that gives users the ability to construct dynamic CSS while maintaining backward compatibility. These tools include variables, functions, mixins, and operations.

In this article, we are going to discuss the Type isunit() function, whose function is to determine whether a value given has a dimension that is equal to the unit given as the second parameter. This function returns a boolean value.

Syntax:

isunit(value, unit)

Parameters:

value: This is the first and compulsory parameter that takes the value which will be evaluated.
unit: This parameter takes the unit identifier that will be tested.

Compile LESS code into CSS code.

Example: The code below demonstrates the usage and implementation of the Type isunit() function 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 isunit() Function</b></h3> 
    <div class="c1">   
        <p>isunit(@uni, '%')<br>FALSE</p>  
        <p>isunit(@uni,'rem')<br>TRUE</p> 
    </div> 
</body> 
  
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light1: rgb(253, 255, 146); 
@light2: rgb(255, 155, 146); 
@uni: 2rem; 
@cond1: boolean(isunit(@uni, '%')); 
@cond2: boolean(isunit(@uni,'rem')); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: @uni; 
    border: @cond2; 
    background-color: if(@cond1, @light2, @dark); 
    padding: 20px 0px 0px 55px; 
} 
p { 
    color: if(@cond2, @light1, @light2); 
}

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:

styles.css:

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
    width: 250px; 
      height: 150px; 
      margin: 2rem; 
      border: true; 
      background-color: hsl(25, 71%, 8%); 
      padding: 20px 0px 0px 55px; 
} 
p { 
    color: #fdff92; 
}