生成替换小数点为短横线的评分CSS类（1.1~10.0）的Less方案问询

你的问题很典型——CSS类名里的小数点会被解析为类的分隔符（比如.rate-1.1会被识别为同时拥有rate-1和1两个类），自然无法正常匹配样式。下面是修正后的Less代码，能生成你需要的.rating-1-1到.rating-10-0这类合法类名：

@iterations: 10;
@step: 0.1;
@min-rating: 1.1; // 控制生成的最小评分值

.rating-loop(@i) when (@i >= @min-rating) {
  // 用replace函数把数值里的小数点替换成短横线
  .rating-@{replace(@i, '.', '-')} {
    width: percentage((@i / @iterations));
  }
  .rating-loop(@i - @step);
}

// 从10.0开始循环，每次递减0.1直到1.1
.rating-loop(@iterations);

关键修改点说明： #

• 类名合法性处理：使用Less内置的replace()函数，将循环变量@i中的小数点.替换为短横线-，确保生成的类名符合CSS语法规范。
• 可控的范围：新增@min-rating变量来指定生成的最小评分值（这里设为1.1），避免生成不需要的低分值类名；@step变量统一控制步长，后续调整更灵活。
• 循环终止条件：把原循环的@i > 0改为@i >= @min-rating，精准控制循环的结束节点，只生成你需要的1.1到10.0区间的类。

生成的CSS示例（截取部分）：

.rating-10-0 {
  width: 100%;
}
.rating-9-9 {
  width: 99%;
}
/* ... */
.rating-1-1 {
  width: 11%;
}

内容的提问来源于stack exchange，提问作者Mohammed Farooq