如何在css LESS中将类循环到属性值

Question

我有 SCSS 代码

.order {
  @for $i from 1 through 3 {
    &--#{$i} { order: $i; }
  }
}

在CSS中编译为

.order--1 {
  order: 1;
}
.order--2 {
  order: 2;
}
.order--3 {
  order: 3;
}

如何在css中执行相同的功能 LESS ？

Answer 1

这段较少的代码：

.order(@n, @i: 1) when (@i =< @n) {
  .order--@{i} {
    order: @i;
  }
  .order(@n, (@i + 1));
}

.order(3);

结果在那个css：

.order--1 {
  order: 1;
}
.order--2 {
  order: 2;
}
.order--3 {
  order: 3;
}

Answer 2

@i: 1;
.order (@i) when (@i <= 3) {
    .order--@{i} {
        order: ~"@{i}";
    }
    .order(@i + 1);
}
.order (@i);

结果是：

.order--1 {
  order: 1;
}
.order--2 {
  order: 2;
}
.order--3 {
  order: 3;
}