请问这种less样式应该怎么写？

Question

问题是这样：less文件里面定义了一个类似这样的

@padding-list: 10, 10.5, 20, 20.5;  

的一个列表，想用less循环得到 .p-10px 这样的类名，代码长这样

.generateSpacing(@i) when (@i < (length(@padding-list) + 1)) {
  .paddingGenerator(@i+1);
}

.paddingGenerator(@size) {
  .p-@{size}px {
    padding: unit(@size, px);
  }
}

但是当取到值为10.5的时候发现 .p-10.5px 这样的类名是不可能存在的，如果是整数还是能直接写到类名上面，现在小数是不行的，所以想替换成 .p-10dot5px，这个时候我应该怎么改？

Answer 1

我记得 LESS 是有 replace 函数的，你可以试试。

Answer 2

感谢上面那位码友提供的思路，目前已经实现了，如果有更好的方案或者觉得我写的还有什么改进的地方，欢迎交流，代码大概长这样：

/* 生成百分比高度类名 */
.generatePercentageHeight(@i) when (@i < (length(@percent-height-list) + 1)) {
  .percentageHeights(extract(@percent-height-list, @i));
  .generatePercentageHeight(@i + 1);
}

.percentageHeights(@size) {

  /* 整数部分 */
  @integer-part: if(floor(@size) > 0, floor(@size), ~'');
  /* 小数部分 */
  @fractional-part1: @size - floor(@size);
  /* 转换为字符串，并替换掉字符串中的 '0.' */
  @fractional-part2: replace('@{fractional-part1}', '0[.]', '');
  /* 将上一步获取到的结果转换可以作为名称的变量 */
  @fractional-part: ~'@{fractional-part2}';

  /**
   * 如 0.5，最终生成的结果是
   * .h-dot5 {
   *    height: 0.5%;
   * }
   * 如 10.5，最终生成的结果是
   * .h-10dot5 {
   *    height: 10.5%;
   * }
   */
  .h-@{integer-part}dot@{fractional-part} when (@size > floor(@size)) {
    height: percentage(@size / 100);
  }

  .h-@{size} when (@size = floor(@size)) {
    height: percentage(@size / 100);
  }

}

:global {
  .generatePercentageHeight(1);
}