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 replace() function, whose function is to replace the whole or a part of a string with another given string replacement. This function takes a string value and its replacement and returns the replaced/updated string.
Syntax:
replace(string, pattern, replacement, flags)
Parameters:
- string: This is the first compulsory parameter for this function which needs to be a string inside quotes.
- pattern: This is the second compulsory parameter for this function which is the pattern that the function will search for and look out for.
- replacement: This is the third compulsory parameter for this function which will the part which will be replaced in the string given.
- flags: This is the optional parameter for this function which is then used to add regular expression flags.
Return type: The returns type of this method is String.
Example 1: The code below demonstrates the usage and implementation of the string replace() function and to show any proper functionality we will also use the String e() function.
<!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 replace() Function</b>
</h3>
<div class="c1">
<p>replace("10px", "px", "rem");
<br>e(replace("10px", "px", "rem"));
</p>
<p>10rem</p>
</div>
</body>
</html>
|
styles.less
@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@str: replace("10px", "px", "rem");
@estr: e(@str); body { background-color: @body-bg-color;
} .c1 {
width: 300px;
height: @estr;
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.
body { background-color: #eeeeee;
} .c1 {
width: 300px;
height: 10rem;
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 replace() function and the usage of isstring and ispercentage type functions.
<!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 replace() Function</b>
</h3>
<div class="c1">
<p>boolean(isstring(@str));<br>TRUE</p>
<p>boolean(ispercentage(@eStr))<br>FALSE</p>
</div>
</body>
</html>
|
styles.less
@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@str: replace("28px", "px", "%");
@estr: e(@str); @cond1: boolean(isstring(@str));
@cond2: boolean(ispercentage(@estr));
body { background-color: @body-bg-color;
} .c1 {
width: @estr;
height: 150px;
margin: 1rem;
border: @cond2;
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.
body { background-color: #eeeeee;
} .c1 {
width: 28%;
height: 150px;
margin: 1rem;
border: false;
background-color: hsl(25, 71%, 8%);
padding: 40px 0px 0px 55px;
} p { color: #fdff92;
} |
Output:
Reference: https://lesscss.org/functions/#string-functions-replace