Generate Classes Using Loop in Less

Question

I'm trying to generate margin classes in Less. I've the code:

.generate-margin(5);

.generate-margin(@n, @i: 1) when (@i =< @n) {

  .mb-@{i} {

    margin-bottom: (@i * 5px) !important;
  }
  .generate-margin(@n, (@i + 1));
}

Which Outputs:

.mb-1 {
  margin-bottom: 5px !important;
}
.mb-2 {
  margin-bottom: 10px !important;
}
.mb-3 {
  margin-bottom: 15px !important;
}
.mb-4 {
  margin-bottom: 20px !important;
}
.mb-5 {
  margin-bottom: 25px !important;
}

But instead of .mb-1, .mb-2, .mb-3, .mb-4, .mb-5 I want .mb-5, .mb-10, .mb-15, .mb-20, .mb-25. How to do that.

Does this answer your question? [How to generate CSS with loop in less](https://stackoverflow.com/questions/15239785/how-to-generate-css-with-loop-in-less) — Heretic Monkey, Dec 26 '19 at 20:40

score 0 · Answer 1 · answered Dec 26 '19 at 11:48

0

Logic I think its:

.generate-margin(5);

.generate-margin(@n, @i: 1) when (@i =< @n) {
     .mb-@{i * 5} {
         margin-bottom: (@i * 5px) !important;
     }
    .generate-margin(@n, (@i + 1));
}

answered Dec 26 '19 at 11:48

Henry

1,242
1
12
10

score 0 · Accepted Answer · answered Dec 26 '19 at 20:37

You can create a variable to store the size of the current margin:

.generate-margin(5);

.generate-margin(@n, @i: 1) when (@i =< @n) {

  @marginSize: @i*5;

  .mb-@{marginSize} {

    margin-bottom: (@i * 5px) !important;
  }
  .generate-margin(@n, (@i + 1));
}

Generate Classes Using Loop in Less

2 Answers2