less循环生成n个类

fastmock

发布于 2022-10-27 15:22:22

6450

发布于 2022-10-27 15:22:22

文章被收录于专栏：fastmockfastmock

在组件化项目开发中，有时候会遇到这种情况，三方组件不支持通过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的单位最好放到变量前面

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-10-08，如有侵权请联系 cloudcommunity@tencent.com 删除

css