Open In App

Less.js String % format() 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. 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 



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