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( 250 rem, px);
@color 1: #ce7a86 ;
@color 2: #080055 ;
@cond: boolean(ispixel(@pix));
body {
background-color : @body-bg-color;
}
.c 1 {
width : @pix;
height : @pix;
background-color : if(@cond, @color 1 , @color 2 );
margin : 1 rem;
margin-left : @pix;
}
p {
color : if(@cond, @color 2 , @color 1 );
font-size : 1.5 rem;
padding : 5 rem 0 0 1.5 rem;
}
|
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 ;
}
.c 1 {
width : 250px ;
height : 250px ;
background-color : #ce7a86 ;
margin : 1 rem;
margin-left : 250px ;
}
p {
color : #080055 ;
font-size : 1.5 rem;
padding : 5 rem 0 0 1.5 rem;
}
|
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( 150 rem, px);
@no: unit(@pix);
@color 1: #95f3e7 ;
@color 2: #4b1905 ;
@cond: boolean(isnumber(@no));
body {
background-color : @body-bg-color;
}
.c 1 {
width : 500px ;
height : 250px ;
background-color : if(@cond, @color 1 , @color 2 );
margin : 1 rem;
margin-left : @pix;
}
p {
color : if(@cond, @color 2 , @color 1 );
font-size : 1.5 rem;
padding : 5 rem 0 0 4.5 rem;
}
|
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 ;
}
.c 1 {
width : 500px ;
height : 250px ;
background-color : #95f3e7 ;
margin : 1 rem;
margin-left : 150px ;
}
p {
color : #4b1905 ;
font-size : 1.5 rem;
padding : 5 rem 0 0 4.5 rem;
}
|
Output:
Reference: https://lesscss.org/functions/#misc-functions-unit
Share your thoughts in the comments
Please Login to comment...