Less.js jsList each() Function
Last Updated :
26 Apr, 2025
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">GeeksforGeeks</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">GeeksforGeeks</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
Similar Reads
Less.js jsList extract() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is better since CSS makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. To create and improve CSS so that
3 min read
Less.js jsList range() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is better since CSS makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. To create and improve CSS so that
3 min read
Less.js jsList length() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is better since CSS makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. To create and improve CSS so that
3 min read
Underscore.js _.each() Function
Underscore.js is a JavaScript library that provides a lot of useful functions that helps in the programming in a big way like the map, filter, invoke etc even without using any built-in objects. The _.each() function is an inbuilt function in Underscore.js library of JavaScript which is used to retu
3 min read
Less.js List Functions
Less.js (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of the normal CSS code and gives it more functionalities and programmable features. Less.js provides us with many List Functions which are basically functions that we can perform on a list of elements
7 min read
Less.js Math cos() Function
Less (Leaner style sheets) is an extension to normal CSS which is basically used to enhance the abilities of normal CSS and give it superpowers. The cos() function is a Math Function in Less.js which is used to find out the cosine value of the argument provided and returns the output. In this articl
2 min read
Less.js Color Channel Functions
In this article, we will take a look at various Color Channel functions provided by Less.js. Less (Leaner Style Sheets) is an extension to normal CSS, which basically enhances the abilities of normal CSS and gives it superpowers. Color Channel functions are built in Less.js to basically extract a co
5 min read
Less.js String Functions
Less.js (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of the normal CSS and gives it programmable powers like variables, functions, loops, etc. String functions are one such type of function provided by Less.js to perform operations on a string like repla
6 min read
Underscore.js _.last() Function
Underscore.js _.last() is used to display the last element of the array. It is usually applied to separate the elements of an array by making it into 2 arrays. One which contains only the last element and the other which contains all the elements except the last one. Syntax:_.last( array, [n] ) Para
3 min read
Less.js Logical Functions
In this article, we will see the Logical Functions in LESS.js. Logical functions are a way to perform operations and evaluate code based on logical conditions. Basically, these functions provide the power of "if-else" conditions in CSS and help us do things based on logic. There are 2 logical functi
3 min read