CSS自定义属性可避免媒体查询中重复写样式，应将响应式值如间距、字号抽为--spacing-sm等变量，在@media中重定义；:root需置于@media内而非其内部；PostCSS/Sass无法替代其运行时响应能力。
媒体查询里写重复样式，是因为没用CSS自定义属性
很多人在多个 @media 块里反复写同一组颜色、间距或字体大小，比如 padding: 16px 在桌面和移动端各写一遍。这不是必须的——CSS 自定义属性（--xxx）天生支持在媒体查询中动态重定义，且浏览器兼容性已覆盖所有现代环境（Chrome 49+、Firefox 31+、Safari 9.1+）。
实操建议：
- 把会变的值抽成
--spacing-sm、--text-size-base这类变量，初始值写在 :root 里 - 在每个
@media块里只改这些变量，不重复写选择器和整套声明 - 避免在变量值里塞单位（如
--gap: 1rem可以，--gap: rem(1)不行），否则 calc() 里容易出错
用 @media 套 :root 会失效？不是语法问题，是作用域理解错了
@media 内部不能直接写 :root { --x: 1 } ——这根本不会生效，因为 :root 是伪类，不是选择器容器。正确做法是把媒体查询放在外层，里面再写 :root 修改，或者更常用的是：直接在 @media 里针对具体选择器批量重设变量。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
@media (max-width: 768px) { :root { --color-bg: #f0f0f0; } }，但变量没更新 → 实际上这个语法合法，但部分旧版 Safari 有 bug，稳妥起见改用下面方式 - 想让所有组件响应式，却在每个组件类里单独写媒体查询 → 导致变量分散、难维护
推荐写法：
@media (max-width: 768px) {
:root {
--spacing-unit: 8px;
--text-size-base: 14px;
}
}
PostCSS 或 Sass 能替代自定义属性吗？能，但没必要加构建步骤
用 postcss-custom-media 或 Sass 的 @mixin 确实能减少重复，但它们生成的是静态 CSS，一旦屏幕尺寸变化，无法动态响应（比如横竖屏切换、系统级缩放）。而原生 --xxx + @media 是运行时计算的，更轻量也更准确。
使用场景判断：
- 项目已重度依赖 PostCSS/Sass，且只需编译时适配 → 可继续用变量 mixin
- 需要支持 PWA、暗色模式联动、或用户可调字号 → 必须用运行时变量
- 打包工具链没配好，又想快速落地 → 直接手写
@media+:root最省事
哪些值不适合抽成变量？别为了“整洁”牺牲可读性
不是所有重复都该消除。比如 border: 1px solid #ccc 在十个地方出现，硬抽成 --border-default 反而让后续排查更费劲——没人记得这个变量到底对应哪条边、什么颜色、是否带圆角。
适合抽的典型值：
- 设计系统级常量：字号阶梯、色彩语义名（
--color-primary）、间距比例（--space-xs） - 需跨断点统一调控的值：容器最大宽度、栅格列数、字体行高倍数
不适合抽的：
- 一次性样式：某个弹窗的
z-index: 9999 - 强上下文绑定的值：按钮悬停时的
transform: scale(1.02) - 带复杂函数的值：如
background: linear-gradient(...)，维护成本远高于收益
变量越多，调试时在 DevTools 里翻 -- 前缀列表的时间就越长。真正省事的方式，是只动那些改一次影响全局的地方。
