Sass变量和函数只能在编译时计算出静态值，响应式宽度需由CSS的calc()在运行时处理；Sass仅适合生成比例（如percentage(3/12)）、缩放系数等确定性数值，单位混用需统一转换，动态逻辑应交由JavaScript或container queries。
怎么用Sass变量和函数算出响应式宽度
直接说结论：Sass本身不运行在浏览器里，所有计算都在编译时完成，所以它算出来的尺寸是静态的——但你可以用数学逻辑模拟动态行为，关键在于「在哪算、怎么暴露变量、谁来触发重算」。
常见错误是以为 @media 里写 calc() 或 Sass 的 percentage() 就能“实时响应”，其实不是：Sass 的 percentage(3/12) 编译后就是 25%，不会再变；而 CSS 的 calc(100% / 3) 才是运行时计算。
- 真正需要 Sass 计算的场景：栅格列宽比例（如 12 栅格中占 3 列 →
percentage(3/12)）、字体缩放系数（1rem * 1.2）、间距阶梯（$space-sm * 2） - 别在 Sass 里试图“监听视口”或“根据容器宽度反推字号”——那是 JavaScript 或 container queries 的事
- 注意单位混用：
px和rem混算会出错，16px + 1rem在 Sass 中非法，必须统一转成数字再乘基准值（如16px * 1.2）
Sass的@if和@for怎么避免生成冗余CSS
很多人用 @for 生成 1–12 的栅格类，结果打出一堆没用的 .col-1 到 .col-12，但实际项目只用到 4、6、8、12。这不是语法问题，是逻辑没收敛。
性能影响很实在：每多一个类，CSS 文件就大几字节，gzip 后虽小，但解析和匹配成本在线性增长；更麻烦的是，这些类一旦打进 bundle，就无法按需删除。
立即学习“前端免费学习笔记（深入）”；
- 用
@if过滤业务真实需要的断点，比如只对$breakpoints: (sm: 576px, md: 768px)生效，而不是硬写sm md lg xl -
@for $i from 1 through 12前先定义$used-columns: 4 6 8 12，再用@each遍历它 - 别在循环里嵌套
@media—— Sass 会为每个循环项都复制一遍媒体查询块，体积爆炸
为什么mixins里传参数比用全局变量更安全
写个 @mixin make-col($span: 4) 看似方便，但如果所有栅格都靠这个 mixin，后期想把某一块改成 flex 布局，就得改 mixin 本体，牵一发而动全身。而用参数控制行为，等于把决策权下放到调用处。
容易踩的坑是把配置项全塞进 mixin 参数，比如 @mixin responsive-font($base: 1rem, $min: 0.875rem, $max: 1.25rem, $break-min: 320px, $break-max: 1200px)，看着灵活，实则每次调用都要重复写一堆默认值，且无法单独覆盖某一项。
- 优先用 map 参数：比如
$config: (span: 6, offset: 2, push: 1)，再用map-get($config, span)提取，可读性和扩展性更好 - 全局变量（
$grid-columns: 12）适合项目级常量；局部参数适合组件级差异 - 如果 mixin 里用了
!default，记得检查是否被其他文件提前赋值过——Sass 变量是第一次声明才生效，后面同名赋值无效
calc() 和 Sass计算混用时最常忽略的兼容性点
你写了 width: calc(#{$container-width} - #{$gutter} * 2)，看起来没问题，但 $container-width 是 1200px，$gutter 是 1.5rem，Sass 编译直接报错：单位不一致无法运算。
这不是 bug，是设计使然。Sass 的数学运算要求单位可转换（如 px 和 em 在已知根字体时可换算），但 rem 是相对 HTML 根元素的，Sass 不知道当前 font-size 是多少，所以拒绝计算。
- 方案一：全部用无单位数字，最后补单位，比如
width: calc((#{$span} / #{$grid-columns}) * 100% - #{$gutter-px} * 2) - 方案二：用 CSS
calc()处理运行时部分，Sass 只负责生成基础比例，比如width: percentage($span / $grid-columns)，再用margin: calc(#{$gutter} / 2)单独处理间隙 - 别依赖
#{math.div($a, $b)}（Dart Sass 1.33+）去替代 CSScalc()——前者编译即定死，后者才是真正的流体计算
最复杂也最容易被跳过的，是搞清哪些计算必须留给 CSS 运行时做。Sass 再强大，也不能代替浏览器渲染引擎理解布局上下文。
