SCSS无法实现运行时响应式间距，所有运算均在编译期生成固定值；真响应式需CSS变量+clamp()/calc()或媒体查询，单位混用会报错，@for等仅输出静态类。
SCSS 本身无法构建“运行时响应式”的间距系统，所有计算都在编译期完成，输出的是固定值；真正能随视口变化的 margin/padding，必须靠 CSS 变量 + clamp() 或 calc() 配合媒体查询来实现。
别指望 @for 或 math.div() 能生成动态间距
常见错误是写一个循环生成 .m-1 到 .m-12 类，再配上 @media 套多层断点——这看似“响应式”，实则只是提前穷举了静态组合。比如 .m-md-4 编译后永远是 margin: 16px，不会随用户缩放、屏幕旋转或 JS 修改而变。
-
@for和math.*()函数只在构建时执行一次，和浏览器无关 - 单位混用（如
1rem + 4px）直接报错，SCSS 不做隐式转换 - 想让 padding 随宽度平滑变化？
$gap * 0.8输出的是死值，不是表达式
用 CSS 自定义属性 + clamp() 实现真响应式间距
这是目前最轻量、可维护性最高、且支持 JS 动态干预的方案。核心是把“基数”抽成变量，让浏览器在运行时计算。
- 在
:root定义无单位基准：--space-unit: 4（推荐整数，避免小数精度问题） - 用
clamp()绑定视口单位：例如padding: clamp(0.5rem, 3vmin, 1.5rem) - vmin 比 vw 更适合垂直方向，窄高屏下不会溢出（如 iPhone 横屏）
- 旧版 Safari 需加
-webkit-clamp()前缀，并配@mediafallback
SCSS 能做的，是帮你安全生成工具类和约束规则
它不负责“响应”，但能极大提升这套系统的可维护性：比如统一导出 spacing map、校验 key 是否合法、批量生成 utility class、约束单位类型。
立即学习“前端免费学习笔记（深入）”；
- 定义语义化 map：
$spacing: ('sm': 4px, 'md': 16px, 'lg': 24px)，而非一堆孤立变量 - 封装
spacing()函数，自动 fallback 并支持$direction参数，避免手误拼错 key - 用
@each遍历 map 生成.p-md、.m-y-lg等类，同时注入@supports (gap: 0)兜底逻辑 - ESLint 插件可强制禁止直接写
margin: 12px，只允许调用spacing('sm')
负 margin 的坑比你想象的深
CSS 规范禁止负 padding，但允许负 margin——这常被用来抵消栅格外边距。然而用变量控制时极易失控。
- 直接写
--margin-shift: -12px可能在小屏把元素推出视口且不可滚动 - 更安全的做法是锁死边界：
--margin-shift: clamp(-8px, var(--space-unit) * -1, 0) - Chrome DevTools 的 Layout Shift Regions 能标出哪些负 margin 正在引发 CLS（累积布局偏移）
- 别在栅格容器（如
.col-4）上直接加 margin，应改用嵌套内容区块承载间距
真正麻烦的不是怎么写 clamp()，而是忘记区分“编译期确定值”和“运行时可变值”——前者归 SCSS，后者必须交给 CSS 变量和浏览器引擎。
