css变量（--xxx）最直接有效解决重复率高问题：改一处全站响应，支持运行时主题切换与媒体查询动态重定义，具备继承、级联和fallback机制，且兼容chrome 49+等主流浏览器。
CSS重复率高，最直接有效的解法不是删代码，而是把硬编码值换成--xxx变量，再用var()统一调用——改一处，全站响应，且不破坏现有结构。
为什么--xxx比 Sass 变量或重复写死更可靠
硬编码颜色、间距、圆角这些值，在多个选择器里反复出现，改一个就得全局搜#333或16px，漏掉就错位；Sass 变量只在构建时生效，无法支持运行时主题切换或媒体查询动态重定义。--xxx是原生 CSS 运行时机制，浏览器直接识别，兼容性已覆盖 Chrome 49+、Firefox 31+、Safari 9.1+。它还能继承、级联、fallback，比如color: var(--text-primary, #333)，拼错变量名也不会崩溃，只会安静回退。
常见误操作包括：
- 把
--spacing-md写在@media外面，导致断点内变量未重定义 - 在
@keyframes里直接用var(--duration)设动画时长（不支持，得用 JS 或构建时注入） - 声明时漏单位，比如
--size: 16，后面calc(100% - var(--size))会失效（必须写--size: 16px）
怎么组织:root和组件级变量才不混乱
全局变量统一收口在:root，比如颜色、断点、基础间距；组件内部需要差异化控制的值（如卡片阴影、表单项错误色），放在组件选择器里声明，靠继承向下透传。这样调试时能一眼看出变量来源，不会因为:root里没定义就到处找。
推荐做法：
-
:root里只放真正跨模块复用的值：--color-primary、--breakpoint-md、--space-lg - 组件变量命名带作用域前缀：
.card { --card-shadow: 0 2px 8px rgba(0,0,0,0.1); } - 避免在
:root里塞太多业务相关变量，比如--user-card-bg——这类该归到组件作用域 - 局部变量不要和全局同名，否则继承链上容易覆盖错，比如
.modal { --color-primary: #d32f2f; }会影响内部所有var(--color-primary)
媒体查询里重复写padding和font-size？直接重定义变量
很多人在@media (min-width: 768px)和@media (min-width: 1024px)里各写一遍padding: 1rem、font-size: 1.125rem，这不是必须的。CSS 自定义属性支持在媒体查询中直接重赋值，浏览器运行时自动切换。
正确写法：
code:root {
--space-md: 0.75rem;
--text-lg: 1.125rem;
}
<p>@media (min-width: 768px) {
:root {
--space-md: 1rem;
--text-lg: 1.25rem;
}
}</p><p>.card .content {
padding: var(--space-md);
font-size: var(--text-lg);
}</p>
注意：:root必须写在@media内部，而不是@media套着:root——后者语法非法，浏览器会忽略整个块。
哪些地方不能用var()，容易踩坑
var()不是万能占位符，它不能用于以下场景：
- 选择器名称本身，比如不能写
var(--class-name) { } - 属性名本身，比如不能写
var(--prop): value -
@import或@font-face里的url()路径（需构建时处理或 JS 注入） - 伪元素
content中若含引号或特殊字符，必须加双引号：content: var(--label, "default"); - IE 完全不支持，如需兼容，得用 PostCSS 插件降级或搭配 CSS-in-JS
最容易被忽略的一点：自定义属性的值本质是字符串，哪怕写--size: 16px，它也不是数值类型；但calc()里只要单位匹配就能算，真正出错的是calc(100% - var(--size, 16))这种缺单位的写法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
