正确做法是让 sass 在编译期先计算比例等数值（如用 percentage() 或 math.div），再将结果注入 calc() 处理动态部分；避免在 calc() 内直接插值未计算的表达式或函数，以防浏览器解析失败。
用 calc() 混合 Sass 数学函数做流式尺寸时，别直接在 calc() 里写 #{...}
因为 calc() 是 CSS 运行时计算，而 Sass 的 px、rem 等单位在编译期就被转成具体数值了——你如果写 calc(100vw - #{20px})，Sass 会输出 calc(100vw - 20px)，看起来没问题，但一旦想用变量做比例（比如 $ratio: 16/9），直接插值就会崩：浏览器不认识 16/9 这种裸分数。
正确做法是让 Sass 先算出结果，再喂给 calc() 做剩余动态部分：
- 用
percentage()或乘法把比例转成小数或百分比值（如16/9 → 177.777...） - 若需保留响应性，把固定基数（如容器宽度）交给
calc()，比例系数由 Sass 提前算好 - 避免在
calc()内部调用min()/max()等函数——它们在旧版 Safari 中支持差，且 Sass 无法提前展开
实现宽高比容器时，aspect-ratio 不可用？用 padding-top + calc() 替代
aspect-ratio 在 Chrome 88+ 和 Firefox 89+ 支持良好，但 Safari 15.4 才开始支持，iOS 15.4 之前全挂。真要兼容，还是得靠传统 padding hack，而 Sass 可以帮你免去手算 padding-top: 56.25%（9/16）这种反人类操作。
示例：生成任意宽高比的容器类
@function aspect-ratio($w, $h) {
@return percentage($h / $w);
}
<p>.aspect-16by9 {
position: relative;
width: 100%;
padding-top: calc(#{aspect-ratio(16, 9)} <em> 1px); // Sass 算出 56.25，再拼成 "56.25px"
}
.aspect-4by3 {
padding-top: calc(#{aspect-ratio(4, 3)} </em> 1px); // → 75px
}</p>
注意：* 1px 是 trick——它把纯数字百分比（如 56.25）强制转成带单位的值，否则 calc() 会报错“invalid property value”。
字体大小流式缩放：别只用 clamp()，Sass 要参与断点区间计算
clamp(1rem, 4vw, 1.5rem) 看似完美，但 4vw 这个中间值不是凭空来的：它得保证在最小视口（比如 320px）刚好等于下限，在最大视口（比如 1440px）刚好顶到上限。手动试错效率低，Sass 可以解这个线性方程。
- 设最小宽度
$min-w: 320px，最大宽度$max-w: 1440px，对应字号$min-fs: 1rem、$max-fs: 1.5rem - 斜率 =
($max-fs - $min-fs) / ($max-w - $min-w)→ 单位是rem/px - 换算成 vw：乘以
100（因 1vw = 1% of viewport width）→ 得到最终clamp()的中间值
实际函数：
@function fluid-font($min-w, $max-w, $min-fs, $max-fs) {
$slope: ($max-fs - $min-fs) / ($max-w - $min-w);
$vw-value: $slope * 100;
@return clamp(#{$min-fs}, #{$vw-value} * 1vw, #{$max-fs});
}
<p>h1 { font-size: fluid-font(320px, 1440px, 1rem, 1.5rem); }</p>
用 math.div() 替代 / 运算符，避免 Sass 3.3 以前的除法歧义
Sass 旧版本（尤其是 Ruby Sass）中，/ 在某些上下文会被当成分隔符而非除法，比如 font: 12px/24px 里的 / 就不会被计算。虽然 Dart Sass 默认已修复，但显式用 math.div($a, $b) 更稳妥，尤其当你把比例计算封装进 mixin 时。
- 启用模块：
@use 'sass:math'; - 替代写法：
math.div($height, $width)比$height / $width更可读、更防错 - 注意：Dart Sass 1.33+ 才内置
sass:math，旧版需用sass:meta或降级为@function手写
流式布局真正难的不是公式本身，而是单位混用时的时机判断：哪些该 Sass 编译期算死，哪些必须留给 CSS 运行时——漏掉这个分界，calc() 就会变成一堆无效字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
