Open In App

Less.js String escape() Function

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. 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 CSS that has been developed and processed using a computer language known as the CSS pre-processor. It is a CSS language extension that also offers features like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss the string escape() function, whose function is to apply URL encoding to special characters in the string passed to it. This function takes a string value and returns the escaped version of the string content without the quotes. 

Syntax:

escape(value)

 

Parameters:

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

Compile LESS code into CSS code.

Example 1: The code below demonstrates the usage and implementation of the string escape() 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 escape() Function</b></h3>
    <div class="c1">  
        <p>boolean(isstring(@str))<br>TRUE</p
        <p>boolean(isstring(@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: "str=test";
@eStr: escape(@str);
@cond1: boolean(isstring(@str));
@cond2: boolean(isstring(@eStr));
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, @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

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: #fdff92;
}


Output:

 

Example 2: The code below demonstrates the usage and implementation of the string escape() function and the usage of isurl type 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 String escape() Function</b></h3>
    <div class="c1">  
        <p> url(www.geeksforgeeks.com)<br>TRUE</p
    </div>
</body>
  
</html>


style.less

CSS




@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@str: "www.geeksforgeeks.com";
@eStr: escape(@str);
@uStr: url(@eStr);
@cond1: boolean(isurl(@str));
@cond2: boolean(isurl(@uStr));
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, @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

CSS




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


Output:

 

Reference: https://lesscss.org/functions/#string-functions-escape 



Last Updated : 07 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads