Less.js Misc get-unit() Function
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" >w3wiki</ 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); @color 1: #95f3e7 ; @color 2: #4b1905 ; @cond: boolean(ispixel(@uni)); body { background-color : @body-bg-color; } .c 1 { width : 500px ; height : @no; background-color : if(@cond, @color 1 , @color 2 ); margin : 1 rem; } p { color : if(@cond, @color 2 , @color 1 ); font-size : 1.5 rem; padding : 5 rem 0 0 4.5 rem; } |
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 ; } .c 1 { width : 500px ; height : 250px ; background-color : #4b1905 ; margin : 1 rem; } p { color : #95f3e7 ; font-size : 1.5 rem; padding : 5 rem 0 0 4.5 rem; } |
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" >w3wiki</ 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); @color 1: #95f3e7 ; @color 2: #4b1905 ; @cond: boolean(isstring(@uni)); body { background-color : @body-bg-color; } .c 1 { width : 500px ; height : @estr; background-color : if(@cond, @color 2 , @color 1 ); margin : 1 rem; } p { color : if(@cond, @color 1 , @color 2 ); font-size : 1.5 rem; padding : 5 rem 0 0 4.5 rem; } |
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 ; } .c 1 { width : 500px ; height : 250px ; background-color : #95f3e7 ; margin : 1 rem; } p { color : #4b1905 ; font-size : 1.5 rem; padding : 5 rem 0 0 4.5 rem; } |
Output:
Reference: https://lesscss.org/functions/#misc-functions-get-unit
Contact Us