Sass百分比函数实现网格列宽计算
2026-04-23 23:37:55
0浏览
收藏
Sass 的 `percentage()` 函数是前端开发者实现精准网格列宽计算的利器，但它并非 CSS 原生能力，必须在 `.scss` 或 `.sass` 文件中经 Sass 编译器（如 Dart Sass）处理才能将 `percentage(1/3)` 这类表达式转化为静态的 `33.33333%`；若误将其写入纯 CSS 或 `
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）处理 - 不能在
