How did you do an arithmetic progression in less?

Question

css

.style{
  position: absolute;
  &-1{
    left: 65px;
  }
  &-2{
    left: 80px;
  }
  &-3{
    left: 95px;
  }
}

Each element is shifted by 15px. It’s somehow not beautiful to prescribe with hands, but I didn’t understand how to set an increase of 15.
Is it even possible to do this in less? If so, how?

Answer 1

.generate-styles(3);

.generate-styles(@n, @i: 1) when (@i =< @n) {
  [email protected]{i} {
    left: 50px + @i * 15px;
  }
  .generate-styles(@n, (@i + 1));
}

The output will give this:

.style-1 {
  left: 65px;
}
.style-2 {
  left: 80px;
}
.style-3 {
  left: 95px;
}