Less.js Type iskeyword() Function

Last Updated : 07 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 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 will discuss the Type iskeyword() function, whose function is to determine whether a given value is a keyword or not. This function returns a boolean value.

Syntax:

iskeyword(value)

Parameters:

value: This is the only compulsory parameter for this function.

Return type: This function returns a boolean value.

Example 1: The code below demonstrates the usage and implementation of the Type iskeyword() function.

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 iskeyword() Function</b></h3> 
    <div class="c1"> 
        <p> 
            boolean(iskeyword(50%)) 
            <br> 
            FALSE 
            <br> 
            boolean(iskeyword(background-color)) 
            <br> 
            TRUE 
        </p> 
    </div> 
</body> 
  
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@cond1: boolean(iskeyword(50%)); 
@cond2: boolean(iskeyword(background-color)); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
    background-color: if(@cond2, @dark, @light); 
} 
p { 
    padding: 20px 0px 0px 55px; 
    color: if(@cond1, @dark, @light); 
} 

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

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

CSS

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

Output:

Example 2: The code below demonstrates the usage and implementation of the Type iskeyword() function with the if and boolean logical functions and the saturation color channel function and how the function and the word itself aren’t and is a keywords respectively.

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 iskeyword() Function</b></h3> 
    <div class="c1"> 
        <p> 
            boolean(iskeyword(saturation(@dark))) 
            <br> 
            FALSE 
            <br> 
            boolean(iskeyword(saturation)) 
            <br> 
            TRUE 
        </p> 
    </div> 
</body> 
  
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@cond1: boolean(iskeyword(saturation(@dark))); 
@cond2: boolean(iskeyword(saturation)); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
    background-color: if(@cond2, @light, @dark); 
} 
p { 
    padding: 30px 0px 0px 50px; 
    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: The CSS output of the above Less file was compiled.

CSS

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