Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is more advantageous because CSS employs a dynamic style sheet language. Several different browsers can use LESS because of its flexibility. In order for web browsers to use CSS, it must be built and enhanced using a computer language known as the CSS pre-processor. It is also a CSS language extension that provides tools like variables, functions, mixins, and operations to help create dynamic CSS while keeping backward compatibility.
In this article, we are going to discuss Type ispercentage() function, whose function is to determine whether a value given is a percentage or not. This function returns a Boolean value.
Syntax:
ispercentage(value)
Â
Parameters:
- value: This is the only compulsory parameter for this function.
Compile LESS code into CSS code.
Example 1: The code below demonstrates the usage and implementation of the Type ispercentage() function.
index.html
<!DOCTYPE html> <html>   <head>     <link rel="stylesheet" type="text/css"           href="style.css"/> </head>   <body>     <h1 style="color:green">neveropen</h1>      <h3><b>Less.js Type       ispercentage() Function</b></h3>     <div class="c1">          <p>ispercentage(50%)<br>TRUE</p>     </div> </body>   </html> |
CSS
@body-bg-color: #eeeeee; @dark: hsl(25, 71%, 8%); @light: rgb(253, 255, 146); @cond1: boolean(ispercentage(50%)); body { Â Â Â Â background-color: @body-bg-color; } .c1 { Â Â Â Â width: 250px; Â Â Â Â height: 150px; Â Â Â Â margin: 1rem; Â Â Â Â background-color: if(@cond1, @dark, @light); } p { Â Â Â Â padding: 50px 0px 0px 45px; Â Â Â Â color: if(@cond1, @light, @dark); } |
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:Â
style.css
body { Â Â Â Â background-color: #eeeeee; } .c1 { Â Â Â Â width: 250px; Â Â Â Â height: 150px; Â Â Â Â margin: 1rem; Â Â Â Â background-color: hsl(25, 71%, 8%); } p { Â Â Â Â padding: 50px 0px 0px 45px; Â Â Â Â color: #fdff92; } |
Output:
Â
Example 2: The code below demonstrates the usage and implementation of the Type ispercentage() function with the if and boolean logical functions and the saturation color channel function.
index.html
<!DOCTYPE html> <html>   <head>     <link rel="stylesheet" type="text/css"           href="style.css"/> </head>   <body>     <h1 style="color:green">neveropen</h1>      <h3><b>Less.js Type       ispercentage() Function</b></h3>     <div class="c1">          <p>ispercentage(Saturation)<br>TRUE</p>     </div> </body>   </html> |
styles.less
@body-bg-color: #eeeeee; @dark: hsl(222, 100%, 24%); @light: rgb(255, 160, 138); @cond1: boolean(ispercentage(saturation(rgb(77, 168, 54)))); body { Â Â Â Â background-color: @body-bg-color; } .c1 { Â Â Â Â width: 250px; Â Â Â Â height: 150px; Â Â Â Â margin: 1rem; Â Â Â Â background-color: if(@cond1, @light, @dark); } p { Â Â Â Â padding: 50px 0px 0px 30px; Â Â Â Â color: if(@cond1, @dark, @light); } |
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:Â
style.css
body { Â Â Â Â background-color: #eeeeee; } .c1 { Â Â Â Â width: 250px; Â Â Â Â height: 150px; Â Â Â Â margin: 1rem; Â Â Â Â background-color: #ffa08a; } p { Â Â Â Â padding: 50px 0px 0px 30px; Â Â Â Â color: hsl(222, 100%, 24%); } |
Output:
Â
Reference: https://lesscss.org/functions/#type-functions-ispercentageÂ
