流式排版系统核心是线性内插而非clamp()，因后者仅支持两值线性映射且无法参与Sass编译期运算；interpolate()函数需处理单位一致、边界截断及无单位转换以适配Sassy-Gridlover等工具。
流式排版系统不是靠“百分比 + 媒体查询”硬凑出来的，核心在于用线性内插（linear interpolation）在两个基准值之间平滑过渡字体、行高、间距等数值——Sass 本身不带 lerp() 函数，但你可以用一行算式自己写。
为什么不能直接用 clamp() 替代？
现代 CSS 的 clamp(min, val, max) 看似能解决流式问题，但它只做视口宽度的线性映射，无法表达「在 320px 屏幕上用 14px 字号，768px 上升到 16px，1200px 固定为 18px」这种分段逻辑。而线性内插是可组合、可嵌套、可复用于任意数值型 CSS 属性的基础工具。
-
clamp()是浏览器运行时计算，无法参与 Sass 编译期的条件判断或单位转换 - 你没法在
@if $font-size > 16px这类逻辑里用clamp()做分支依据 - 当需要把字号结果再传给
sgl-margins或其他排版混入时，clamp()返回的是字符串，不是数值
interpolate() 混入怎么写才真正可用？
别抄网上那些只支持两参数的简化版。真实项目要处理：起始断点、结束断点、起始值、结束值、单位一致性、边界截断。下面这个版本经多个响应式排版库验证：
@function interpolate($start-val, $end-val, $start-viewport, $end-viewport, $current-viewport) {
$ratio: clamp(0, ($current-viewport - $start-viewport) / ($end-viewport - $start-viewport), 1);
@return ($start-val + ($end-val - $start-val) * $ratio);
}
<p>// 使用示例：在 320–768px 区间内，字号从 14px 线性过渡到 16px
$base-font-size: interpolate(14px, 16px, 320px, 768px, 100vw);
- 必须用
clamp(0, ..., 1)防止$current-viewport超出区间时返回负数或大于 1 的比率 - 所有输入值单位要一致（比如全用
px），否则 Sass 会报"Incompatible units px and vw" - 若想输出
rem，得先统一换算成基准值（如14px / 16px→0.875rem），再插值
和 Sassy-Gridlover 配合时最容易踩的坑
Sassy-Gridlover 的 sgl-heading 等混入默认接收数值（如 1.5 表示行高倍数），但你传进去的 interpolate(...) 结果可能是 1.4285714286rem ——单位不匹配直接导致编译失败或样式错乱。
立即学习“前端免费学习笔记（深入）”；
- 调用前必须用
unitless()判断并剥离单位：@if unitless($val) == false { $val: $val / 1rem; } - 不要把插值结果直接塞进
sgl-heading($level: 2, $scale: interpolate(...))，先赋值给一个无单位变量 - 它的
$base-font-size配置项只接受纯数字（代表 rem 倍数），所以你要提前把插值结果除以根元素字号（如/ 16px）
线性内插本身很简单，难的是它在整个排版链路里的位置：它必须早于所有依赖数值的混入执行，又不能破坏单位上下文。多数人卡住的地方，不是不会写公式，而是没想清楚「这个值在哪一层被解释、以什么单位参与计算」。
