CSS变量仅在被≥2个无法共享类名的选择器真实引用时才能减小体积，滥用未使用的变量反而增大文件体积，变量是否被实际消费比定义更重要。
什么时候 CSS 变量真能压体积？
核心判断标准是：--spacing-md: 12px 这类变量必须被 ≥2 个无法共享类名的选择器 真实引用，才产生压缩收益。
- 适合场景：按钮、卡片、表单控件各自写
padding: 12px，统一换成padding: var(--spacing-md)，CSS 文件里就只存一次声明 - 不适合场景：某个弹窗里唯一一次用
border: 1px solid #e9ecef，硬起个--modal-border，白增 28 字节（含空格和分号） - 变量名本身计入体积：
--sm比--spacing-sm虽短，但团队协作中没人知道它指什么，后期维护成本远高于节省的几字节
为什么变量滥用反而增大体积？
构建工具不会自动剔除未被 var() 引用的变量，它们照进打包产物，gzip 也救不了。
-
:root里堆满未使用的--color-primary、--color-secondary… 却只用了其中 3 个 → 全部输出 - 为每个组件单独定义作用域变量，如
.card { --card-padding: 16px; }+.modal { --modal-padding: 24px; }→ 等于用变量复制了传统类名膨胀路径 - 为 IE 写 fallback：
color: #333; color: var(--text)→ 第二行 IE 完全忽略，纯属冗余占体积
Linaria 和 Stylus 中变量的体积敏感点
这些工具对变量的处理方式不同，直接影响最终体积。
- Linaria 支持组件级变量作用域：
const Card = styled.div` --card-bg: ${props => props.bgColor}; background: var(--card-bg); `→ 变量只在该组件生效，避免全局污染 - Stylus 的
@import变量文件若被多个文件@use，但只调用其中部分变量，其余仍全量注入 → 不做 tree-shaking - Stylus 编译必须显式设
sassOptions.outputStyle = 'compressed'，否则后续压缩插件要多压一遍空格换行
:root 里塞了 50+ 个变量，构建后发现只有 7 个被 var() 调用过——剩下 43 个全是体积累赘。 
