Less.js Misc get-unit() Function

Last Updated : 06 Nov, 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 the Misc get-unit() function, its utility is to find the unit of a number that is passed into the function. This function returns the unit if the number has a unit and nothing if the number doesn’t contain a unit.

Syntax:

get-unit(number)

Parameters:

number: The only compulsory parameter for this function and needs to be a number with or without a unit.

Please refer to the Compile LESS code into CSS code. article for a detailed description of the installation procedure.

Example 1: The code below demonstrates the usage and implementation of the Misc get-unit() function and uses it with the ispixel() 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>Less.js Misc get-unit() Function</h3> 
    <div class="c1"> 
        <p>@uni: get-unit(@no) 
              <br>boolean(ispixel(@uni)) 
            <br>TRUE 
        </p> 
    </div> 
</body> 
  
</html>

styles.less:

CSS

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

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

styles.css: The compiled CSS file comes to be:

CSS

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

Output:

Example 2: The code below demonstrates the usage and implementation of the Misc get-unit() function and uses it with the isstring() function and the string % format() 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 get-unit() Function</h3> 
    <div class="c1">   
        <p> 
              @uni: get-unit(@no) 
          <br>@estr: e(%("%a%d", 250, @uni)); 
          <br>height: 250px 
        </p> 
    </div> 
</body> 
  
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@no: 250px; 
@uni: get-unit(@no); 
@str: %("%a%d", 250, @uni); 
@estr: e(@str); 
@color1: #95f3e7; 
@color2: #4b1905; 
@cond: boolean(isstring(@uni)); 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 500px; 
    height: @estr; 
    background-color: if(@cond, @color2, @color1); 
    margin: 1rem; 
} 
  
p { 
    color: if(@cond, @color1, @color2); 
    font-size: 1.5rem; 
    padding: 5rem 0 0 4.5rem; 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

styles.css: The compiled CSS file comes to be:

CSS

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