less循环生成n个样式类

在组件化项目开发中，有时候会遇到这种情况，三方组件不支持通过style属性来自定义样式，只能通过className 来指定class样式类名（如，ant 的 Table 组件），这时候就会有个问题，如果我们希望指定的是动态的高度或者宽度，且这个值是不固定的任意值，我们就无法知道应该指定哪个class名了。这里我采用了一个妥协方案，

使用less的循环，事先生成n多个class，在使用的时候，动态匹配这些class中的对应值就行了，如下，使用less生成1-200的高度class。

.generate-height(@n, @i: 1) when (@i =< @n) {
  .height-@{i} {
    // height: (@i * 100% / @n);
    height: 1px * @i;
  }
  .generate-height(@n, (@i + 1));
}

生成的css内容如下：

.height-1 {
  height: 1px;
}
.height-2 {
  height: 2px;
}
.height-3 {
  height: 3px;
}
.height-4 {
  height: 4px;
}
.height-5 {
  height: 5px;
}
.height-6 {
  height: 6px;
}
.height-7 {
  height: 7px;
}
.height-8 {
  height: 8px;
}
.height-9 {
  height: 9px;
}
.height-10 {
  height: 10px;
}
/*..此处省略11-198..*/
.height-198 {
  height: 198px;
}
.height-199 {
  height: 199px;
}
.height-200 {
  height: 200px;
}

注意，height的单位最好放到变量前面

使用方式：

<Table
    size='small'
    tableLayout='fixed'
    loading={dataLoading}
    pagination={false}
    dataSource={dataList}
    style={{ width: '100%', border: borderInfo }}
    columns={tableColumns}
    // 读取变量设置class
    rowClassName={(record, index) => `height-${properties?.cellHeight}`}
></Table>