Thursday, August 28, 2025
HomeLanguagesJavascriptLess.js Type ispercentage() Function

Less.js Type ispercentage() Function

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 

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32236 POSTS0 COMMENTS
Milvus
80 POSTS0 COMMENTS
Nango Kala
6609 POSTS0 COMMENTS
Nicole Veronica
11779 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11828 POSTS0 COMMENTS
Shaida Kate Naidoo
6719 POSTS0 COMMENTS
Ted Musemwa
7002 POSTS0 COMMENTS
Thapelo Manthata
6678 POSTS0 COMMENTS
Umr Jansen
6690 POSTS0 COMMENTS