css变量用于padding/margin需在:root定义并带单位（如16px），无单位值会导致声明无效；简写时须保证1–4个合法值；响应式需媒体查询重定义变量；调试优先检查拼写、作用域和覆盖。
直接用var()设置padding和margin就行，但必须配:root定义 + 明确单位
只要变量值带单位（比如--space-md: 16px），就能直接在padding或margin里用var(--space-md)。浏览器会原样代入计算，不报错、不 fallback。没单位的变量（如--space-md: 16）会导致声明无效——CSS 解析器看到padding: var(--space-md)时，实际得到的是padding: 16，而16不是合法长度值。
padding和margin简写中混用var()要小心顺序和数量
四值简写（上右下左）里每个位置都可独立用var()，但必须保证最终是 1–4 个合法值。比如：
.card {
padding: var(--space-sm) var(--space-md) var(--space-lg) var(--space-xs);
}
常见错误是少写一个var()导致语法断裂，例如：
-
padding: var(--space-sm) 12px var(--space-lg);→ 第二个值是固定数字，没问题 -
padding: var(--space-sm) var(--space-md) 12px;→ 合法，三值简写（上 | 左右 | 下） -
padding: var(--space-sm) var(--space-md);→ 合法，双值简写（上下 | 左右） -
padding: var(--space-sm) var(--space-md) var(--space-lg) 12px 8px;→ ❌ 多了一个值，整条声明被忽略
响应式切换需在媒体查询里重定义变量，不能靠calc()动态推导
var()本身不支持运行时计算，calc(var(--space-md) * 1.5)这种写法在绝大多数浏览器里无效（仅 Safari 16.4+ 有限支持）。真要响应式缩放，得在@media里覆盖变量值：
:root {
--space-md: 16px;
}
@media (max-width: 768px) {
:root {
--space-md: 12px;
}
}
.card {
padding: var(--space-md);
}
这样.card在小屏下会自动取12px，无需改类名或 JS 干预。注意：变量重定义必须在同级作用域（比如都在:root），嵌套规则（如.theme-dark :root）不会生效。
调试var()失效时，优先查变量名拼写和作用域链
变量未生效的典型现象：元素间距回退到浏览器默认值（如margin为0或1em）。这时候别急着改 CSS，先确认：
- 变量是否在
:root里定义？写在.card选择器内部的--space-md对子元素不可见 - 变量名大小写是否完全一致？
--Space-Md和--space-md是两个变量 - 有没有被更高优先级样式覆盖？DevTools 里看 computed 值旁是否有“
var(--space-md)”被划掉 - 是否在
!important后用了var()？margin: var(--space-md) !important;合法，但margin: var(--space-md) !important漏了分号会导致整条规则失效
最隐蔽的问题是 CSS 变量作用域穿透失败——父组件定义的变量，子组件 Shadow DOM 默认拿不到，得显式用inherit或part机制透传。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
