math.percentage()仅生成静态百分比值，非响应式计算；它在scss编译时即固化为固定数值（如33.333%），无法感知视口、容器或dom变化，真正自适应需依赖css运行时机制如vw/vh、clamp()或container queries。
math.percentage() 只能生成静态百分比值，不是响应式计算——它在编译时就固定为一个数字，比如 math.percentage(3 / 12) 输出 25%，之后不会再随视口或容器变化。
为什么 math.percentage 不等于“自适应”
常见错误是把 math.percentage() 当成 CSS 的 calc()：前者运行在构建阶段，后者运行在浏览器里。SCSS 编译完，所有 math.percentage() 都已变成死值，无法感知 DOM 尺寸、视口宽度或父容器实际占比。
- 写
width: math.percentage(1 / 3);→ 编译后就是width: 33.33333%;，和手写没区别 - 试图在
@media里用它“根据断点重算比例”——不行，断点只是输出不同静态规则，不是动态重执行函数 - 混用单位如
math.percentage(240px / 1200px)会报错，Sass 不允许带单位参与除法（必须先转纯数字）
正确使用 math.percentage 的场景
它只适合做「确定性比例换算」，比如栅格系统列宽、字体缩放系数、间距倍数等设计层可预知的数值。
- 生成语义化栅格类：
@for $i from 1 through 12 { .col-#{$i} { width: math.percentage($i / 12.0); } }（注意.0防整除截断） - 配合变量定义比例基准：
$grid-unit: math.percentage(1 / 12.0); .col-3 { width: #{$grid-unit * 3}; } - 算字体缩放比：
font-size: 1rem * math.percentage(120);→1.2rem（math.percentage(120)返回120%，可参与乘法）
真要“自适应宽度”，该用什么
运行时宽度控制必须交给 CSS 原生能力，SCSS 只负责注入参数或模板字符串。
- 视窗级适配：用
vw/vh单位，SCSS 可封装转换函数，如@function vw($px) { @return math.div($px, 1920) * 100vw; } - 容器级响应：用
container queries+clamp()或minmax()，SCSS 只传入变量值，例如width: clamp(200px, var(--col-min), 30%); - 弹性容错：搭配
box-sizing: border-box和gap，避免百分比 + padding/border 导致溢出
最易忽略的一点：所有用 math.percentage() 算出的值，都默认不带 box-sizing 保护；实际项目中，width: 33.333% 遇到 padding: 8px 就可能换行——这个坑不在函数本身，而在你忘了统一声明 *, *::before, *::after { box-sizing: border-box; }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
