用 Sass 变量配合 calc() 实现响应式尺寸，需统一单位、避免混用 rem/em，优先用 clamp() 做流体缩放，慎用循环防 CSS 膨胀，Sass 仅静态计算，不感知运行时继承。
用 calc() + Sass 变量做响应式尺寸，别直接写死像素
纯 CSS 的 calc() 本身不支持变量运算，但 Sass 在编译时就能把变量代入计算，生成最终的 CSS 值。这意味着你可以在 @media 里写 font-size: calc(#{$base-font} * 1.2);，Sass 会提前算好结果，而不是让浏览器 runtime 解析变量——后者根本不行。
常见错误是误以为 Sass 的 calc() 是“运行时函数”，其实它只是字符串拼接：Sass 不解析 calc() 内部，只保证括号和单位原样输出。所以真正起作用的是你在 Sass 层做的乘除加减。
- 用
$base-unit: 1rem;定义基准，所有尺寸基于它推导，比如padding: $base-unit * 1.5; - 避免混用单位做运算：
16px + 1em会报错，Sass 不自动换算单位，必须统一为px、rem或无单位数 - 如果要保留浏览器端计算（比如视口相关），才用
calc(100vw - #{$sidebar-width});，注意$sidebar-width必须是带单位的值，否则拼出来是calc(100vw - 240)—— 缺单位，CSS 无效
Sass 自定义函数 fluid-size() 处理断点间平滑缩放
移动端到桌面端字体/间距突变很生硬，靠多个 @media 手动写太累。用 Sass 函数封装线性插值逻辑，输入最小/最大尺寸和对应断点，自动产出 clamp() 或多层媒体查询。
关键不是“炫技”，而是控制输出体积：一个 fluid-size($min: 1rem, $max: 1.5rem, $min-w: 320px, $max-w: 1200px) 函数，可以复用在 font-size、padding、gap 上，避免重复写三套断点。
立即学习“前端免费学习笔记（深入）”；
- 推荐输出
clamp()：现代浏览器支持好，一行解决，例如font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem); - 若需兼容旧浏览器，函数应返回
@media块，但注意嵌套层级——在@mixin里调用函数再输出@media更可控 - 别在函数里用
#{}拼单位字符串，容易漏空格，比如#{1.2}rem输出1.2rem没问题，但#{1.2} px会变成1.2 px（多空格），CSS 解析失败
rem 与 em 混用时，Sass 计算容易忽略继承链
很多人设 $font-base: 16px;，然后写 font-size: $font-base * 1.125; 得到 18px，再转成 1.125rem —— 这没问题。但一旦父元素 font-size 被改过（比如 0.875rem），子元素用 em 就会叠乘，而 Sass 编译时完全感知不到运行时继承关系。
也就是说：Sass 只管静态计算，不管 DOM 结构。你写的 margin: 1em; 在编译后还是 margin: 1em;，最终大小由浏览器根据当前元素的 font-size 决定，Sass 一步都插不上手。
- 优先用
rem做布局尺寸，确保基准一致；仅在需要相对父级缩放时（如图标对齐文字）才用em - 如果必须用
em，别用 Sass 算“等效 rem 值”，直接写0.875em，让它自然继承 - 警惕
line-height：无单位值（如1.5）是乘数，不会被 Sass 单位运算影响；但写成1.5em就会随父级变化，且 Sass 无法预知
编译后 CSS 体积暴增？检查 @for 和 map-loop 是否过度展开
Sass 的循环和映射遍历很方便，但一不小心就会把本该用 JS 动态计算的逻辑，硬塞进编译期。比如用 @for $i from 1 through 12 生成 12 个 grid-column: span #{$i};，看起来干净，实际输出 12 行 CSS —— 而多数场景只需 grid-column: span var(--span); 配合 JS 控制。
更隐蔽的是 @each 遍历颜色 map 生成所有状态类：.btn--primary:hover、.btn--primary:active、.btn--secondary:hover……组合爆炸后 CSS 文件翻倍，gzip 也救不了。
- 只对「确定不变」的组合用循环：比如固定 4 个断点、3 种字重，可接受；但用户态主题色、动态栅格列数，交给 CSS 自定义属性或 JS
- 用
@debug打印循环次数，上线前确认没意外展开（比如 map 里混入了不该遍历的配置项） - 如果必须批量生成，加注释说明“此处为编译期静态展开，非运行时逻辑”，方便后续维护者判断是否可删减
事情说清了就结束。最常被忽略的其实是单位一致性——Sass 不会替你校验 px 和 rem 混用是否合理，它只忠实地把数字和字符串拼出来。你得自己盯住每一处运算的上下文。
