Less.js String e() Function
Last Updated :
28 Apr, 2025
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;
}
Output:
Reference: https://lesscss.org/functions/#string-functions-e
Similar Reads
Less.js String Functions Less.js (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of the normal CSS and gives it programmable powers like variables, functions, loops, etc. String functions are one such type of function provided by Less.js to perform operations on a string like repla
6 min read
Less.js String escape() Function Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is preferable since CSS is a dynamic style sheet language. LESS can be utilized by many different browsers because it is versatile. Web browsers can only use CS
3 min read
Less.js String % format() Function 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 an
4 min read
Less.js String replace() Function Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is preferable since CSS is a dynamic style sheet language. LESS can be utilized by many different browsers because it is versatile. Web browsers can only use CS
3 min read
Less.js List Functions Less.js (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of the normal CSS code and gives it more functionalities and programmable features. Less.js provides us with many List Functions which are basically functions that we can perform on a list of elements
7 min read
Less.js Math sin() Function Less (Leaner style sheets) is an extension to normal CSS which is basically used to enhance the abilities of normal CSS and give it superpowers. The sin() function is a math function provided by Less.js which is used to find out the sine value of the argument provided and returns the output. In this
3 min read