Less loop using mixin, simple example to generate CSS

Writing Less loops

One of the advantages of writing less instead of CSS is that you can create loops instead of repeating the same code again and again. Here are some examples that can help you understand how less loops work.

/*  number of iterations for the mixin */
@iterations: 3;
/* the mixin test if counter has reached 0 */
.mixin-simple-loop (@i) when (@i > 0) {  
    /* print a class with @i variable in the class name */
    .margin_top_@{i}0{
      margin-top:(@i*10px);
  	}
    /* print another class */
    .margin_bottom_@{i}0{    
      margin-bottom:(@i*10px);
  	}
   /* the mixin calls itself while lowering the counter @i */
  .mixin-simple-loop(@i - 1);
}
// call the mixin
.mixin-simple-loop(@iterations);

/*---- output CSS code will be ---- */
.margin_top_30 {
  margin-top: 30px;
}
.margin_bottom_30 {
  margin-bottom: 30px;
}
.margin_top_20 {
  margin-top: 20px;
}
.margin_bottom_20 {
  margin-bottom: 20px;
}
.margin_top_10 {
  margin-top: 10px;
}
.margin_bottom_10 {
  margin-bottom: 10px;
}

Now you can use  css classes such as
margin_top_10 to .. margin_top_30
margin_bottom_10 to .. margin_bottom_30
in your html file.

Try it out using the online less tester and add your modification. Hit Ctrl+Enter to compile your less into CSS, don’t forget to delete the comments if you do.

Hope you found this useful, cheers!