percentage() 是 Sass 内置函数，非 CSS 原生，需 .scss/.sass 文件经 Sass 编译器处理，输入必须为无单位数值，输出如 33.33333%，不可在纯 CSS 或 style 标签中直接使用。
percentage() 函数不是 CSS 原生函数，是 Sass 内置函数
直接在 .css 文件里写 width: percentage(1/3); 会报错——浏览器根本不认识这个函数。它只在 Sass 编译阶段起作用，输出的是静态数值，比如 33.33333%。
常见错误现象：Invalid CSS after "width: percentage": expected expression (e.g. 1px, bold), was "(1/3)"，说明你把 Sass 代码当纯 CSS 运行了。
- 必须用
.scss或.sass后缀保存文件，并经 Sass 编译器（如 Dart Sass）处理 - 不能在
<style></style>标签内直接写percentage()，除非该标签被构建工具识别为 Sass 源 -
percentage()的参数必须是小数或可计算为小数的表达式，percentage(1px)或percentage(1em)都非法
网格列宽常用算术逻辑：100% 除以列数
比如 3 列等宽网格，每列应占 100% / 3，但 CSS 不支持运行时除法，Sass 可帮你算出来。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写成
width: percentage(1/3);，而非width: 100% / 3;（后者是无效 CSS） - 注意除法优先级：
percentage(2/6)和percentage(1/3)结果相同，但percentage(2)/6是错的——percentage()返回的是带单位的数值，不能再除 - 若列数存在变量，如
$cols: 4;，写成width: percentage(1 / $cols);，Sass 会自动计算为25%
避免浮点精度误差导致的布局错位
Sass 计算 percentage(1/3) 得到的是 33.3333333333%，多个这样的列加起来可能略超 100%，尤其在 flex 或 grid 中触发换行或滚动条。
解决方法：
- 用
math.div(1, 3)（Dart Sass 1.20+）替代1/3，配合math.round()控制小数位：percentage(math.round(math.div(1, 3) * 10000) / 10000) - 更稳妥的做法是改用 CSS Grid 的
fr单位：grid-template-columns: repeat(3, 1fr)，完全规避百分比舍入问题 - 如果必须用百分比（如兼容老 IE），建议对最后一列设
flex: 1或width: auto，让它兜底剩余空间
和 CSS calc() 混用时要注意编译时机
有人想“用 Sass 算一部分，留一部分给浏览器算”，比如 width: calc(percentage(1/3) + 10px)，这会失败——percentage() 输出的是字符串 "33.33333%"，而 calc() 无法在编译期拼接字符串。
正确做法：
- 全交给 Sass：用
math.div()和单位运算，如#{math.div(100%, 3)} + 10px（需用插值#{}） - 全交给 CSS：改用
calc(100% / 3 + 10px)，现代浏览器都支持，无需 Sass 参与 - 不要交叉混用函数与运行时计算，容易误判执行上下文
最常被忽略的一点：percentage() 的输入必须是无单位数值，而开发者常从 rem、em 变量里直接拿值去算，结果编译就崩——先用 math.unitless() 剥离单位，再喂给 percentage()。
