less循环生成css

1.普通遍历

@colorArr: {
  white: white;
  primary: #35a0e8;
  info: #909399;
  success: #67C23A;
  danger: #F56C6C
}

each(@colorArr, {
  .text-@{key} {
    color: @value;
  }

  .bg-@{key} {
    background-color: @value;
  }
});

生成的css

2.递归生成

@positionArr: {
  l: left;
  r: right;
  t: top;
  b: bottom
}

@step: 10px;

//定义
.loop(@n, @i:1) when (@i <= @n) {
  each(@positionArr, {
    .p@{key}-@{i} {
      padding-@{value}: @step * @i;
    }
    .m@{key}-@{i} {
      margin-@{value}: @step * @i;
    }
  });

  .mx-@{i} {
    margin-left: @step * @i;
    margin-right: @step * @i;
  }
  .px-@{i} {
    padding-left: @step * @i;
    padding-right: @step * @i;
  }
  .my-@{i} {
    margin-top: @step * @i;
    margin-bottom: @step * @i;
  }
  .py-@{i} {
    padding-top: @step * @i;
    padding-bottom: @step * @i;
  }

  .p-@{i} {
    padding: @step * @i;
  }
  .m-@{i} {
    margin: @step * @i;
  }
  .loop(@n, (@i + 1));
}

.loop(10);

生成css

我是vue项目，编译完成后在头文件可以看到