应优先用 calc() 实现响应式计算，因 sass 运算在编译时完成、不支持动态单位（如 vw）和运行时上下文；sass 仅适合处理设计系统级常量，calc() 才能实时响应视口、滚动条、js 变量等。
为什么直接用 calc() 而不是 Sass 的 +、* 做响应式计算
Sass 的数值运算（如 $base * 1.5）在编译时就完成，输出的是静态 CSS 值；而真实响应式需要浏览器运行时动态计算。比如 width: calc(100vw - 2rem) 能随视口缩放实时调整，但 width: #{100vw - 2rem} 会报错——Sass 不认识 vw 单位，也无法在编译期获取视口尺寸。
所以：Sass 函数只适合处理「已知常量」的预计算，比如栅格列宽比例、字体缩放系数、z-index 层级偏移；真要减去滚动条宽度、根据 em 动态算行高、或配合 JS 更新的变量，必须交给 calc()。
-
px、rem、em等带单位的值，在 Sass 中参与运算前必须单位一致，否则报Incompatible units -
calc()内部不支持 Sass 变量插值（#{...}），得用 CSS 自定义属性中转，例如：--gap: #{$gap}; width: calc(100% - var(--gap)) - 混合使用时，优先让 Sass 处理「设计系统级常量」，
calc()处理「运行时上下文相关值」
rem 基准换算别硬编码，用 px-to-rem() 函数统一维护
很多人把 16px = 1rem 写死在样式里，结果根字体变（如用户设置浏览器默认字号为 20px），所有 rem 布局就错位。正确做法是用 Sass 函数封装换算逻辑，让基准可配置。
示例函数定义：
@function px-to-rem($px, $base-font-size: 16px) {
@return ($px / $base-font-size) * 1rem;
}
使用时：
-
font-size: px-to-rem(18px);→ 编译为font-size: 1.125rem -
margin: px-to-rem(8px) px-to-rem(16px);→ 编译为margin: 0.5rem 1rem - 若项目改用
20px为基准，只需改函数调用参数：px-to-rem(18px, 20px)，无需逐个改数值
用 mix() 和 rgba() 实现主题色自适应明暗，而不是写两套变量
深色模式下，纯黑文字（#000）在深背景上不可读，但手动维护两套颜色变量易出错。Sass 的 mix() 和 rgba() 可基于主色动态生成适配值。
-
mix(#000, $primary, 20%)：把主色和黑色按比例混合，得到更沉稳的强调色 -
rgba($primary, 0.8)：降低主色透明度，用于禁用态或弱提示，避免新建$primary-light变量 - 注意：
mix()要求两个颜色同属 RGB 或 HSL，不能混用#fff和hsl(0, 0%, 100%)，否则报Invalid CSS - 深色模式切换建议用
@media (prefers-color-scheme: dark)+ CSS 变量，Sass 仅负责生成初始值
Grid 列宽计算慎用 percentage()，优先用 fr 或 minmax()
Sass 的 percentage() 函数只是把小数转百分比字符串（如 percentage(0.3333) → 33.3333%），它无法解决浮动布局遗留的四舍五入误差，也不兼容 Grid 的弹性行为。
真正可靠的响应式列宽方案是：
- 固定列数均分：
grid-template-columns: repeat(3, 1fr)，不用任何 Sass 计算 - 内容自适应最小宽度：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))) - 若必须用百分比（如兼容旧浏览器），用
calc()配合 CSS 变量：--col-count: 4; width: calc((100% - var(--gap) * (#{$col-count} - 1)) / #{$col-count})
最后提醒一句：Sass 是构建时工具，它的函数再强大，也不能替代 CSS 原生的流式能力。把计算责任分清楚，该交给浏览器的别塞给编译器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
