LESS - Loops


In this chapter, we will understand how Loops work in LESS. Loops statement allows us to execute a statement or group of statements multiple times. Various iterative/loop structures can be created when recursive mixin combine with Guard Expressions and Pattern Matching.


The following example demonstrates the use of loops in the LESS file −


<!doctype html>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />

      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>

Next, create the style.less file.


.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);

div {

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −


div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;


Follow these steps to see how the above code works −

  • Save the above html code in the loop_example.htm file.

  • Open this HTML file in a browser, the following output will gets displayed.

Less css guard