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">neveropen</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">neveropen</h1> <h3><b>Less.js String escape() Function</b></h3> <div class="c1"> <p> url(www.neveropen.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.neveropen.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