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;
}
.c 1 {
width : 300px ;
height : @estr;
margin : 1 rem;
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 ;
}
.c 1 {
width : 300px ;
height : 9 rem;
margin : 1 rem;
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);
@cond 1: boolean(isstring(@str));
@cond 2: boolean(ispercentage(@estr));
body {
background-color : @body-bg-color;
}
.c 1 {
width : @estr;
height : 150px ;
margin : 1 rem;
background-color : if(@cond 1 , @dark, @light);
padding : 40px 0px 0px 55px ;
}
p {
color : if(@cond 2 , @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 ;
}
.c 1 {
width : 28% ;
height : 150px ;
margin : 1 rem;
background-color : hsl( 25 , 71% , 8% );
padding : 40px 0px 0px 55px ;
}
p {
color : #fdff92 ;
}
|
Output:
Reference: https://lesscss.org/functions/#string-functions–format
Last Updated :
15 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...