<p>calc()中不能直接混用SCSS变量与CSS单位运算，需用SCSS提前计算斜率$($slope)和截距$($intercept)，再代入calc(#{$intercept} + 100vw * #{$slope})，且$slope必须为px单位；推荐封装@function fluid-font()并配合媒体查询兜底。</p>
calc() 里不能直接用 SCSS 数学运算，必须提前计算好值
很多人写 font-size: calc(#{$min} + #{$max} - #{$min})
calc() 是 CSS 运行时函数，SCSS 的 $min、$max 等变量在编译期就被替换成数值，但如果你把整个表达式塞进 calc() 里又混用单位（比如 16px + (100vw - 320px) * 0.02），浏览器解析会失败。关键点是：SCSS 负责算「系数」和「基准值」，calc() 只负责做「响应式线性插值」。正确做法是拆开：用 SCSS 算出斜率（$slope）和截距（$intercept），再把它们代入 calc() 的纯数学表达式中。例如：
font-size: calc(#{$intercept} + 100vw * #{$slope});其中 $intercept 和 $slope 必须是带单位的数值（如 16px、0.02px），且 $slope 单位必须是 px（不能是 em 或无单位），否则 calc() 会拒绝计算。
用 @function 封装流体字体逻辑，避免重复手算
手动算斜率太容易出错：比如从 320px 到 1280px 宽度，字体从 16px 到 24px，斜率其实是 (24px - 16px) / (1280px - 320px) = 0.008333...px。每次改断点都要重算，还容易漏单位。
立即学习“前端免费学习笔记（深入）”；
用 SCSS 函数自动处理：
@function fluid-font($min-width, $max-width, $min-font, $max-font) {
$slope: ($max-font - $min-font) / ($max-width - $min-width);
$intercept: $min-font - $slope * $min-width;
@return calc(#{$intercept} + 100vw * #{$slope});
}调用时直接写：font-size: fluid-font(320px, 1280px, 16px, 24px);
- 所有参数必须带单位，且宽度用
px，字体用px（其他单位如rem会导致单位不匹配） - 函数返回的是字符串，不是数值，所以不能用于
math.div()等后续运算 - 如果
$min-width和$max-width相等，除零会报错，建议加@if判断
移动端小屏下字体过小？必须配合 min/max 配合媒体查询兜底
calc() 流体公式在超小屏（比如 280px）可能算出 12.5px，视觉上太轻，可读性差；而大屏到 2000px 又可能膨胀到 32px，破坏排版节奏。
不能只靠一个 calc() 表达式，得用三层控制：
- 最小值：用
clamp()最方便，但兼容性要求 Chrome 88+/Safari 14.1+；老项目只能用@media - 基础流体：用上面的
fluid-font()函数生成核心calc() - 最大值兜底：额外加一条
@media (min-width: 1280px) { font-size: 24px; }
推荐写法（兼顾兼容性）：
font-size: 16px; // fallback
font-size: fluid-font(320px, 1280px, 16px, 24px);
@media (max-width: 320px) { font-size: 16px; }
@media (min-width: 1280px) { font-size: 24px; }单位混用导致 calc() 失效的典型错误
最常踩的坑是把不同单位硬塞进同一个 calc() 表达式，比如：
calc(16px + (100vw - 320px) * 0.02)
这里 0.02 是无单位数，乘以 px 得到 px，看似合理，但 SCSS 编译后若变成 calc(16px + 100vw * 0.02 - 320px * 0.02)，浏览器会因运算优先级和单位归一化问题拒绝解析。
安全写法只有两种：
- 全部用
px单位：斜率必须是0.02px，不是0.02 - 用
clamp()替代：如clamp(16px, 4vw, 24px)，但注意4vw是相对视口宽，不是线性插值，行为略有差异
另外，Sass 4.0+ 默认开启 math.div() 模式，旧写法 / 除法需显式写成 math.div($a, $b)，否则可能被当成 CSS 除法符号直接输出，造成语法错误。
