SCSS无法根据容器宽度自动调整padding，因编译后为静态值；calc()在padding中含减法/除法被禁止，且百分比基于父宽；响应式需用媒体查询、clamp()或JS+CSS变量动态注入。
SCSS 无法根据容器宽度自动调整 padding——它在编译阶段就固化为静态值，运行时根本不知道容器多宽。
为什么 calc() 在 padding 里写百分比运算会失效
你试过 padding: calc(100% / 4 - 10px) 或 padding-left: calc(20% - 5px)？浏览器直接忽略整条声明。原因有二：
- CSS 规范禁止在
padding中使用含减法、除法的calc()表达式（仅允许加法和乘法，且右侧必须是无单位数或长度） -
padding-top和padding-bottom的百分比永远基于父容器的 宽度，不是当前元素自身宽度，更不是“容器实时宽度”
别碰 $container-padding-x 想实现响应式
这是 Bootstrap 5 的 SCSS 变量，只控制所有断点下 .container 的左右内边距，默认值 1.5rem。但它有硬伤：
- 改了变量但用的是 CDN 引入的
bootstrap.min.css？→ 完全无效 - 改了
node_modules/bootstrap/scss/_variables.scss却没重新运行sass编译？→ 修改没进输出 CSS - 它不支持断点分级：没法让 xs 下是
0.5rem、xl 下是2rem；真要响应式，得用工具类组合：px-2 px-md-4 px-xl-5
真正能响应容器宽度的方案只有 JS + CSS 变量
如果业务场景确实依赖某个 DOM 容器的实际宽度（比如侧边栏折叠后主内容区需动态缩进），必须跳出纯 CSS 思路：
立即学习“前端免费学习笔记（深入）”；
- 用
element.getBoundingClientRect().width读取容器实时宽度 - 通过
document.documentElement.style.setProperty('--container-w', '${w}px')注入 CSS 变量 - CSS 中写：
padding-left: calc(var(--container-w) * 0.05);（即 5% 容器宽） - 监听
resize，并在菜单折叠/展开等重排时机手动触发更新；避免在scroll中高频调用，用requestAnimationFrame节流
多数所谓“随容器宽度调整”的需求，其实本质是随视口变化——这时 clamp(0.5rem, 4vw, 1.5rem) 或媒体查询就够了。JS 方案虽可行，但容易被忽略的是：它无法响应 CSS 动画、伪元素插入、或 flex/grid 自动重排引发的尺寸变化，必须显式触发更新。
