SCSS百分比计算错误：12列网格系统宽度编译结果不符预期

嘿，这个问题我之前在项目里也碰到过——你的SCSS网格编译结果突然出现了一堆冗余小数位，本该是整数的25%、50%变成了近似值，核心原因是Sass的数值精度处理逻辑发生了变化（比如版本更新或者全局配置被修改）。下面给你几个可行的解决办法：

方法1：用round()函数精准控制小数位数 #

这是最直接且兼容所有Sass版本的方案，通过round()对计算结果进行四舍五入，匹配你之前的预期精度（保留5位小数）：

@for $i from 1 through 11 {
  .c#{$i} {
    // 先放大数值取整，再缩小回去，确保保留5位小数
    width: round((100% / 12) * $i * 100000) / 100000;
  }
}

这个写法会让计算结果自动规整：比如.c3的宽度会是25%，.c6会是50%，其余列也会和你之前的正确结果完全一致。

方法2：结合percentage()和分数计算（更易读） #

如果想让代码更直观体现12列网格的比例逻辑，可以用分数配合percentage()转换，再加上round()控制精度：

@for $i from 1 through 11 {
  .c#{$i} {
    width: round(percentage($i / 12) * 100000) / 100000;
  }
}

这个写法和方法1效果完全相同，但$i / 12更清晰地表达了“第i列占12列的比例”，可读性更高。

方法3：调整全局精度（仅适用于旧版Sass） #

如果你的项目用的是Ruby Sass或者旧版Dart Sass，可以通过全局变量设置默认精度，让所有数值计算都按指定规则处理。在SCSS文件开头添加：

$precision: 5;

⚠️ 注意：新版Dart Sass已经移除了全局精度配置，所以这个方法只适合旧版本项目，推荐优先用前两种方法。

验证编译结果 #

使用上面的方法后，编译出的CSS会恢复成你预期的理想状态：

.c1 { width: 8.33333%; }
.c2 { width: 16.66667%; }
.c3 { width: 25%; }
.c4 { width: 33.33333%; }
.c5 { width: 41.66667%; }
.c6 { width: 50%; }
.c7 { width: 58.33333%; }
.c8 { width: 66.66667%; }
.c9 { width: 75%; }
.c10 { width: 83.33333%; }
.c11 { width: 91.66667%; }

另外补充一句：你提到的两种SCSS写法编译结果一致是正常的，因为100% / 12计算后本身就是8.3333333333%左右，所以两种写法本质是同一个计算逻辑，问题都出在精度处理上。

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