chrome≤79不支持#rrggbbaa和calc()内var()，会静默丢弃整条声明；须前置静态值（如color: #ff6b35; color: #ff6b3580;），禁用@supports检测，postcss不处理calc内var()，需手动替换或拆分变量。
CSS变量在老版本Chrome（≤79）中不支持#RRGGBBAA八位色值，且calc()内嵌var()会整条失效——这不是bug，是解析器直接跳过。
检查#RRGGBBAA是否被静默丢弃
Chrome 64 及更早版本完全不认识#ff6b3580这类写法，连 fallback 都不走，控制台零提示，只取继承值或初始值（比如文字变黑、背景变透明）。
- 必须前置一个旧版能解析的值：
color: #ff6b35;+color: #ff6b3580;，顺序不能反 - 别信
@supports (color: #ff6b3580)——Chrome 64 不支持该语法，CSS.supports()返回false，但你无法区分是语法不支持还是拼错 - 如果变量里存了
#RRGGBBAA（如--primary: #ff6b3580;），Chrome 64 会把整个var(--primary)当无效字符串处理，color: var(--primary, #000)也救不了——它连var()都不认
验证calc() + var()是否彻底失效
像width: calc(100% - var(--gap));这种组合，在 Chrome ≤79 中不是“var()没替换”，而是整个calc()表达式被 parser 当作非法值丢弃，最终宽度回退到auto或继承值。
- PostCSS 的
postcss-custom-properties默认不处理calc()内的var()；即使开了preserve: true，输出仍是width: calc(100% - var(--gap));，旧浏览器照样跳过 - 安全做法：提前算好值，写成
width: calc(100% - 12px);；或拆出独立变量，用postcss-calc配合postcss-custom-properties，但顺序必须是先custom-properties替换变量，再calc计算 - 不要在变量定义里混用
calc()和var()，例如--gap: calc(1rem + var(--base));—— PostCSS 插件不递归解析，直接跳过
确认变量是否真的加载并生效
很多“变量不生效”问题根本不是兼容性问题，而是加载失败或作用域错误，尤其在老 Chrome 中，错误更隐蔽。
- 打开 DevTools → Network 面板，确认定义变量的 CSS 文件状态码是
200，路径没错（比如漏了./或多写了斜杠） - 变量必须定义在使用位置之前，且作用域覆盖：全局推荐写在
:root；若写在.theme-dark { --bg: #111; }里，则只能在该类元素内部用var(--bg) - 检查拼写：变量名区分大小写，
--Color≠--color；定义必须以两个短横线开头，var(--color)不能少括号或写成color: --color
调试时最容易忽略的点
老 Chrome（尤其是 64–79）对 CSS 的容错极低，但错误不报、不标红，全靠人工盯输出和渲染结果。
- 在 Elements 面板里看样式规则：如果某条含
var()的声明被划掉（strikethrough），说明浏览器压根没解析它——不是值错了，是语法不认 - 不要只看页面“看起来有没有颜色”，要查计算样式（Computed）面板里
color/background等属性的最终值来源，确认是来自你写的 fallback 还是继承/初始值 - 如果用了 PostCSS，构建后打开产出的 CSS 文件，全局搜索
var(--：还有残留，说明变量跨文件、含calc()、或由 JS 注入（如document.documentElement.style.setProperty()），插件根本看不到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
