Less.js Type isstring() Function

Last Updated : 06 Oct, 2022

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 the Type isstring() function, whose function is to determine whether a value given is a string or not. This function returns a Boolean value.

Syntax:

isstring(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 isstring() function.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Type isstring() Function</h3> 
      
    <div class="c1"> 
        <p>isstring("50%")<br>TRUE</p> 
        <p>isstring(50%)<br>FALSE</p> 
    </div> 
</body> 
  
</html>

styles.less

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

Syntax: 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.

styles.css

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

Output:

Example 2: The code below demonstrates the usage and implementation of the Type isstring() function with the if and boolean logical functions and the saturation color channel function.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Type isstring() Function</h3> 
      
    <div class="c1"> 
        <p>isstring(String of Saturation)<br>TRUE</p> 
    </div> 
</body> 
  
</html>

styles.less

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

Syntax: 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:

styles.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%); 
}