Dart Sass的math模块仅在编译期运行，输出静态值，不能替代CSS calc()等运行时函数，二者属不同阶段、分工协作。
math模块在Dart Sass中不能直接替代CSS的calc()
这是最常见的误解：Dart Sass 的 math 模块（如 math.div()、math.min()）只在编译期运行，输出的是静态数值；而 CSS 的 calc() 是浏览器运行时计算的动态表达式。两者根本不在同一阶段工作，不存在“替代”关系，只有“分工”关系。
-
math.div(100%, 3)编译后变成33.333333%—— 失去响应性，无法随视口变化 -
calc(100% / 3)保留在 CSS 中，由浏览器实时解析 —— 支持 fluid layout、自适应容器 - 混用时务必分清：Sass 数学用于确定固定比例、断点阈值、预设间距等编译期已知量
什么时候该用math.div()而不是写死数字？
当需要保持数学语义清晰、避免魔法数字，且结果确定为静态值时，math.div() 比手算更安全。尤其在涉及单位混合或精度敏感场景下。
- 网格列宽计算：
width: math.div(100%, 12);明确表达“十二等分”，比8.333333%更易维护 - 单位一致性检查：
math.div(24px, 1rem)在1rem = 16px时返回1.5，可用于条件判断（如缩放系数校验） - 避免浮点误差累积：多次嵌套除法时，
math.div()内部使用高精度运算，比24 / 16 / 2更可靠 - 注意：
math.div(100, 3)返回33.3333333333，但 Sass 默认只保留小数点后 5 位（可通过--precision调整）
为什么math.min()和math.max()不能代替min()/max() CSS函数？
因为 CSS 的 min() 和 max() 支持相对单位、视口单位和媒体查询变量，而 Sass 的 math.min() 只接受编译期可求值的数字或带单位的长度（且单位必须一致）。
- ✅ 合法：
font-size: math.max(1rem, 16px);→ 编译为1rem（因单位可比） - ❌ 报错：
math.max(1rem, 100vw)——vw是运行时单位，Sass 无法在编译期比较 - ✅ 正确做法：
font-size: max(1rem, 100vw);直接输出到 CSS，交由浏览器处理 - ⚠️ 坑：
math.min(20px, 1em)在1em = 16px时返回16px，但若根字体大小动态变化，这个结果就错了
如何安全地桥接Sass计算与CSS运行时函数？
关键原则：Sass 处理「确定性」，CSS 处理「不确定性」。需要用变量或自定义函数做边界隔离。
立即学习“前端免费学习笔记（深入）”；
- 用 Sass 计算基准值，再注入 CSS 函数：
$base-gap: 24px;<br>$fluid-gap: calc(#{$base-gap} * 1.2); // 输出 calc(24px * 1.2) - 避免在
calc()内调用 Sass 函数：calc(math.div(100%, 3) + 1rem)❌ ——math.div会被提前执行，结果变成calc(33.33333% + 1rem)，语义已变 - 响应式断点建议用 Sass 计算像素值，再转成
min-width媒体查询：@media (min-width: #{math.div($breakpoint-xl, 1px)}px) - 真正需要混合的场景（如 clamp），优先用原生 CSS：
font-size: clamp(1rem, 2.5vw, 1.5rem);—— 不要试图用math模拟
最易被忽略的一点：Sass 的 math 模块默认不自动导入，必须显式写 @use 'sass:math';，否则所有 math.xxx() 都会报 Undefined function 错误。
