Less.js String e() 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. Since CSS is a dynamic style sheet language, it is preferred. Because LESS is adaptable, it can be used by a variety of browsers. Only CSS that has been created and processed using the CSS pre-processor, a computer language, can be used by web browsers. In addition to providing capabilities like variables, functions, mixins, and operations to help create dynamic CSS while maintaining backward compatibility, it is a CSS language extension.

In this article, we are going to discuss the String e() Function, whose function is to return the escaped version of the string content without the quotes.

Syntax:

e(value)

Parameters:

value: This is the only compulsory parameter for this function which needs to be a string inside quotes.

Return type: This method returns a string value.

Example 1: The code below demonstrates the usage and implementation of the String e() Function and the usage of 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 String e() Function</b></h3> 
    <div class="c1">   
        <p>width: e("65%")<br>width: 65%</p>  
    </div> 
</body> 
  
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@str: "65%"; 
@eStr: e(@str); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: @eStr; 
    height: 150px; 
    margin: 1rem; 
    background-color: @light; 
    padding: 40px 0px 0px 55px; 
} 
p { 
    color: @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: 65%; 
    height: 150px; 
    margin: 1rem; 
    background-color: #fdff92; 
    padding: 40px 0px 0px 55px; 
} 
p { 
    color: hsl(25, 71%, 8%); 
} 

Output:

Example 2: The code below demonstrates the usage and implementation of the String e() Function and the usage of isstring and ispercentage type 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 String e() Function</b></h3> 
    <div class="c1">   
        <p>boolean(isstring(@eStr))<br>TRUE</p>  
        <p>boolean(ispercentage(@eStr))<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

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: 55%; 
    height: 150px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
    padding: 40px 0px 0px 55px; 
} 
p { 
    color: #fdff92; 
} 