The Less Loops statement facilitates you to execute a statement or group of statements multiple times. These iterative loop structures are created when recursive mixin incorporated with Guard Expressions and Pattern Matching.

Let's take an example to understand the working of Loops in Less.

Create a HTML file named "simple.html", having the following data.

HTML file: simple.html

  1. <article>  
  2. <!DOCTYPE html>  
  3. <head>  
  4.    <link rel="stylesheet" href="simple.css" type="text/css" />  
  5. </head>  
  6. <body>  
  7. <div class="cont">  
  8.    <h2>Welcome to JavaTpoint</h2>  
  9.    <p>A solution of all technology.</p>  
  10. </div>  
  11. </body>  
  12. </html>  

Now create a file named "simple.less". It is similar to CSS file. The only one difference is that it is saved with ".less" extension.

Less file: simple.less

  1. .cont(@count) when (@count > 0) {  
  2.   .cont((@count - 1));  
  3.   width: (25px * @count);  
  4. }  
  5. div {  
  6.   .cont(7);  
  7. }    

Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

Less loops1

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

Less loops2

The generated CSS "simple.css", has the following code:

  1. div {  
  2.   width: 25px;  
  3.   width: 50px;  
  4.   width: 75px;  
  5.   width: 100px;  
  6.   width: 125px;  
  7.   width: 150px;  
  8.   width: 175px;  
  9. }  

Output:

Less loops3