Open In App

Less.js Type iscolor() Function

Last Updated : 11 Oct, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS uses a dynamic style sheet language, it is more beneficial. Because of LESS adaptability, it may be used by numerous different browsers. CSS must be created and improved using a computer language known as the CSS pre-processor in order for web browsers to use it. Along with providing tools like variables, functions, mixins, and operations to help construct dynamic CSS while maintaining backward compatibility, it is also a CSS language extension.

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

Syntax:

iscolor(value)

 

Parameters:

  • value: This is the only compulsory parameter for this function. It takes values in hex codes, RGB values, and HSL values.

Compile LESS code into CSS code.

Example 1: The code below demonstrates the usage and implementation of the Type iscolor() 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 Type iscolor() Function</h3>
    <div class="c1">
        <p>isColor(hsv(values))<br>TRUE</p
    </div>
</body>
  
</html>


style.less: This is compiled into a CSS file which is given further below:

CSS




@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@cond1: boolean(iscolor(@light));
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);
}


Syntax: To compile the above LESS code to CSS code, run the following command.

lessc style.less style.css

style.css: The CSS output of the above Less file was compiled:

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 iscolor() function with the if and boolean logical functions and the HSV Color Definition 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 Type iscolor() Function</h3>
      
    <div class="c1">
        <p>isColor(hsv(values))<br>TRUE</p>
    </div>
</body>
  
</html>


style.less: This is compiled into a CSS file which is given further below.

CSS




/* styles.less */
@body-bg-color: #eeeeee;
@dark: hsl(222, 100%, 24%);
@light: rgb(255, 160, 138);
@cond1: boolean(iscolor(hsv(90, 100%, 50%)));
  
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);
}


Syntax: To compile the above LESS code to CSS code, run the following command.

lessc style.less style.css

style.css: The CSS output of the above Less file was compiled.

CSS




/* styles.less */
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-iscolor 



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads