Sass @for指令整数与小数类选择器百分比设置问题求助

嘿，这个问题我之前帮同事排查过！核心原因很简单：你用的@for循环天生只能处理整数步长——它会从0到100逐个生成整数数值，完全碰不到小数，自然没法生成.percentage-50.5这类带小数后缀的选择器，更别说对应的样式了。

下面给你两种实用的解决方案，按需选择：

方案1：精准生成需要的整数/小数类（推荐） #

如果你只需要特定的几个小数数值（比如50.5、33.3这类），直接用@each循环列举出所有需要的数值就行，灵活又高效：

// 把你需要的整数、小数都列在这个列表里
$percentage-values: 0, 25, 33.3, 50, 50.5, 75, 100;

@each $val in $percentage-values {
  .percentage-#{$val} {
    width: #{$val}%;
  }
}

编译后的CSS会完美生成你要的类，包括.percentage-50.5 { width: 50.5%; }，直接就能生效。

方案2：生成连续步长的小数类（适合需要全范围的场景） #

如果需要从0到100按固定小数步长（比如0.5、0.1）生成所有类，用@while循环自定义步长就行：

$start: 0;
$end: 100;
$step: 0.5; // 自定义步长，比如改成0.1就是每0.1%生成一个类

@while $start <= $end {
  .percentage-#{$start} {
    width: #{$start}%;
  }
  $start: $start + $step;
}

⚠️ 注意：这种方式会生成大量类（比如步长0.5的话会有201个），如果不是必须全范围覆盖，优先用方案1。

小优化：去掉多余的.0后缀 #

如果你的列表里有类似50.0的数值，编译后会生成.percentage-50.0这种冗余类名，可以加个小判断优化：

@each $val in $percentage-values {
  // 如果是整数，就去掉小数点和0；否则保留原数值
  $class-suffix: if($val == round($val), round($val), $val);
  .percentage-#{$class-suffix} {
    width: #{$val}%;
  }
}

这样50.0会自动转换成50，生成更整洁的.percentage-50类。

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