Less Loops

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Less Loops

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.

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. }    

HTML file: simple.html

 

 

 

 

 

 

  

 

 

 

 

 

 

 

  

Welcome to JavaTpoint

 

 

  

A solution of all technology.

 

 

 

 

 

 

 

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

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

For example:

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. }