Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS uses a dynamic style sheet language, it is more advantageous. LESS is adaptable enough to function in a variety of browsers. A computer language called the CSS pre-processor is used to build and enhance CSS so that web browsers may use it. It is also a language extension for CSS that offers resources like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while maintaining backward compatibility.
In our article, we will learn the jsList each() Function, whose job is to Bind each list member to a rule set’s assessment. This is very similar to the concept of foreach loop.
Syntax:
each(@list, {
.li -@{ value } {
property: ;
}
});
Parameters:
- list: This parameter is used to give a collection of values separated by commas or spaces.
- rules: This parameter is used to specify an unnamed ruleset or mixin.
Compile LESS code into CSS code.
Example 1: The code below demonstrates the usage and implementation of the jsList each() 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 jsList each() Function</b></h3> <div class="box"> <div class="c-1"> <p> <strong>1st box</strong> </p> </div> <div class="c-2"> <p> <strong>2nd box</strong> </p> </div> <div class="c-3"> <p> <strong>3rd box</strong> </p> </div> <div class="c-4"> <p> <strong>4th box</strong> </p> </div> <div class="c-5"> <p> <strong>5th box</strong> </p> </div> </div> </body> </html> |
styles.less:
CSS
@body-bg-color: #eeeeee; @list: 1, 2, 3, 4, 5; each(@list, { .c-@{value} { width: 100px; height: 150px; background-color: green; margin: 1rem; } }); body { background-color: @body-bg-color; } .box { display: flex; } p { padding: 50px 0 0 20px; color: #ffffff; } |
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:
styles.css
CSS
.c-1 { width: 100px; height: 150px; background-color: green; margin: 1rem; } .c-2 { width: 100px; height: 150px; background-color: green; margin: 1rem; } .c-3 { width: 100px; height: 150px; background-color: green; margin: 1rem; } .c-4 { width: 100px; height: 150px; background-color: green; margin: 1rem; } .c-5 { width: 100px; height: 150px; background-color: green; margin: 1rem; } body { background-color: #eeeeee; } .box { display: flex; } p { padding: 50px 0 0 20px; color: #ffffff; } |
Output:
Example 2: The code below demonstrates the usage and implementation of the Less.js jsList each() Function using rulesets as structured lists.
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 jsList each() Function</b></h3> <div class="c1"> </div> </body> </html> |
style.less
CSS
@body-bg-color: #eeeeee; @prop: { color: green; image: url("img.png"); size: 50%; repeat: repeat; }; .c1 { each(@prop, { background-@{key}: @value; }); } body { background-color: @body-bg-color; } div { width: 500px; height: 400px; margin-left: 7rem; } |
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:
CSS
.c1 { background-color: green; background-image: url("img.png"); background-size: 50%; background-repeat: repeat; } body { background-color: #eeeeee; } div { width: 500px; height: 400px; margin-left: 7rem; } |
Output:
Reference: https://lesscss.org/functions/#list-functions-each