css中的循环样式 less与sass

 
在sass中
.flex {
    @for $i from 1 through 30 {
      &-#{$i} {
        flex: $i;
      }
    }
  }

在less中

.flexCn(@i) when(@i <=24) {
    .flex@{i} {
      flex: @i;
    }


    .flexCn((@i + 1));
  }



  .flexCn(1);

// 最后显示的样式效果为

.flex {
  &-1 {
    flex: 1;
  }
  &-2 {
    flex: 2;
  }
  &-3{
    flex: 3;
  }
........
  &-30{
    flex: 30;
  }
}


通过 class="flex-1" 可以调用