Less.js Type ispixel() 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. It is better since CSS uses a dynamic style sheet language. LESS is flexible enough to be utilized by a wide range of browsers. Web browsers can only use CSS if it is developed and refined using a computer language called the CSS pre-processor. It is a CSS language extension as well as offering features like variables, functions, mixins, and operations to aid in creating dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss Type ispixel() function, whose function is to determine whether a value given is a pixel value or not. This function returns a boolean value.

Syntax:

ispixel(value)

Parameters:

value: This is the only compulsory parameter for this function. This value is determined by whether it is a pixel unit or not.

Return type: This method returns a boolean value.

Example 1: The code below demonstrates the usage and implementation of the Type 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><b>Less.js Type ispixel() Function</b></h3> 
    <div class="c1">   
        <p>ispixel(150px)<br>TRUE</p>  
        <p>ispixel(color)<br>FALSE</p> 
    </div> 
</body> 
  
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@str: "55%"; 
@eStr: e(@str); 
@cond1: boolean(isstring(@eStr)); 
@cond2: boolean(ispercentage(@eStr)); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: @eStr; 
    height: 150px; 
    margin: 1rem; 
    background-color: if(@cond1, @dark, @light); 
    padding: 40px 0px 0px 55px; 
} 
p { 
    color: if(@cond2, @dark, @light); 
} 

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 is as follows.

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
    width: 55%; 
    height: 150px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
    padding: 40px 0px 0px 55px; 
} 
p { 
    color: #fdff92; 
} 

Output:

Example 2: The code below demonstrates the usage and implementation of the Type ispixel() Function with the if() and boolean logical functions image-height misc functions.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="style.css" /> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3><b>Less.js Type ispixel() Function</b></h3> 
    <div class="c1"> 
    </div> 
</body> 
  
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@len: image-height("1.png"); 
@cond: boolean(ispixel(@len)); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: @len * 3; 
    height: @len; 
    background-image: url("1.png"); 
    background-repeat: if(@cond, repeat, no-repeat); 
    margin: 1rem; 
} 

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 is as follows:

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
    width: 55%; 
    height: 150px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
    padding: 40px 0px 0px 55px; 
} 
p { 
    color: #fdff92; 
} 