Less.jsMisc unit() Function

Last Updated : 25 Oct, 2022

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 Misc unit() Function, its utility is to remove or change the dimension of a unit. This function returns the unit with changed dimension if the second unit parameter is given or just the number of the unit with the dimension removed.

Syntax:

unit(dimension, unit)

Parameters:

dimension: This is the first parameter for this function. This parameter takes a number with or without a dimension.
unit: This is the second parameter for this function and this is optional. This parameter takes a unit as a value if this parameter is not added then the dimension is removed from the first parameter.

Compile LESS code into CSS code.

Example 1: The code below demonstrates the usage and implementation of the Misc unit() Function.

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 unit() Function</h3> 
      
    <div class="c1"> 
        <p> 
            width: unit(250, px);<br> 
            height: unit(250, px); 
        </p> 
    </div> 
</body> 
  
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
@pix: unit(250rem, px); 
@color1: #ce7a86; 
@color2: #080055; 
@cond: boolean(ispixel(@pix)); 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: @pix; 
    height: @pix; 
    background-color: if(@cond, @color1, @color2); 
    margin: 1rem; 
    margin-left: @pix; 
} 
  
p { 
    color: if(@cond, @color2, @color1); 
    font-size: 1.5rem; 
    padding: 5rem 0 0 1.5rem; 
}

Syntax: To compile the above LESS code to CSS code, run the following command.

lessc style.less style.css

The CSS output of the above Less file was compiled into the following file.

style.css:

CSS

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 250px; 
    height: 250px; 
    background-color: #ce7a86; 
    margin: 1rem; 
    margin-left: 250px; 
} 
  
p { 
    color: #080055; 
    font-size: 1.5rem; 
    padding: 5rem 0 0 1.5rem; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Misc unit() Function and using the isnumber and boolean functions alongside it.

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 unit() Function</h3> 
      
    <div class="c1"> 
        <p> 
            isnumber(unit(unit(150rem, px)))<br>TRUE 
        </p> 
    </div> 
</body> 
  
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
@pix: unit(150rem, px); 
@no: unit(@pix); 
@color1: #95f3e7; 
@color2: #4b1905; 
@cond: boolean(isnumber(@no)); 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 500px; 
    height: 250px; 
    background-color: if(@cond, @color1, @color2); 
    margin: 1rem; 
    margin-left: @pix; 
} 
  
p { 
    color: if(@cond, @color2, @color1); 
    font-size: 1.5rem; 
    padding: 5rem 0 0 4.5rem; 
}

Syntax: To compile the above LESS code to CSS code, run the following command.

lessc style.less style.css

The CSS output of the above Less file was compiled:

style.css:

CSS

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 500px; 
    height: 250px; 
    background-color: #95f3e7; 
    margin: 1rem; 
    margin-left: 150px; 
} 
  
p { 
    color: #4b1905; 
    font-size: 1.5rem; 
    padding: 5rem 0 0 4.5rem; 
}