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 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 % format() function, this function is to format a string by putting in arguments that are passed into it. This function takes a string value and returns the escaped version of the string content without the quotes.
Syntax:
%(string, arguments...)
Parameters:
- string: This is the first compulsory parameter for this function which needs to be a string inside quotes.
- arguments: This is the second compulsory parameter for this function where the arguments are passed which are placed into the format given in the first string.
Placeholders:
- d, D, a, A: These are interchangeable with any argument (color, number, escaped value, expression, …). When combined with a string, they will use the entire string, including any quotations. However, the quotes are not escaped by “/” or any other character, they are just included in the string as is.
- s, S: They can be changed with any other expression. If you use it with a string, the quotations are omitted and only the string value is used.
Return type: This method returns a formatted String.
Example 1: The code below demonstrates the usage and implementation of the string % format() function and the usage of if() and boolean logical functions and to show any proper functionality we will also use the String e() 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 % format() Function</b></h3> <div class="c1"> <p>e(%("%a%s", 4+5, "rem")); </p> <p>9rem</p> </div> </body> </html> |
styles.less
CSS
@body-bg-color: #eeeeee; @dark: hsl(25, 71%, 8%); @light: rgb(253, 255, 146); @str: %("%a%s", 4+5, "rem"); @estr: e(@str); body { background-color: @body-bg-color; } .c1 { width: 300px; height: @estr; margin: 1rem; background-color: @light; padding: 40px 0px 0px 75px; } 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: 300px; height: 9rem; margin: 1rem; background-color: #fdff92; padding: 40px 0px 0px 75px; } p { color: hsl(25, 71%, 8%); } |
Output:
Example 2: The code below demonstrates the usage and implementation of the string % format() function and the usage of isstring() and ispercentage() type functions and to show any proper functionality we will also use the String e() 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 % format() 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
CSS
@body-bg-color: #eeeeee; @dark: hsl(25, 71%, 8%); @light: rgb(253, 255, 146); @str: %("%a%s", 20+8, "%"); @estr: e(@str); @cond1: boolean(isstring(@str)); @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: 28%; 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–format
Please Login to comment...