SCSS变量是编译期静态常量，CSS变量是运行时动态属性；前者用$定义、编译后被替换消失，后者用--定义、保留在最终CSS中供JS操作和继承。
直接删掉 SCSS 改用原生 CSS 变量，不是“升级”，而是把编译期逻辑硬塞进运行时环境——多数人踩坑，是因为没分清 $color 和 --color 根本不在同一个时空里工作。
SCSS变量和CSS变量的生命周期完全不同
SCSS 的 $primary 在 Webpack 或 Vite 构建时就被替换成 #3b82f6，输出的 CSS 里根本找不到这个符号；而 --primary 是浏览器解析 CSS 时才注册进样式树的“活变量”，能被 JS 读写、能响应媒体查询、能在 DevTools 里实时改值。你写 $x: var(--y)，Sass 编译器会报错或原样输出，因为它连 var() 都不认——它只处理字符串和数值，不执行 CSS 函数。
常见错误现象：
- 把
:root { --color: $primary; }当成合法写法，结果编译出无效 CSS - 在
calc()里直接写width: calc($size + 10px)，Sass 尝试调用内置min()/max()函数失败 - 以为给
:root设了--spacing，就能在 SCSS 文件里用$spacing自动同步——完全不成立
哪些 SCSS 功能现在能安全平移？看浏览器支持率，别信“全都能换”
不是所有新 CSS 特性都适合立刻替换。重点盯住支持率 >95% 的稳定特性（Chrome/Firefox/Safari/Edge 最新版），忽略实验性提案。
立即学习“前端免费学习笔记（深入）”；
-
calc()+var()：可替代 80% 的数值变量和简单运算，但注意单位必须显式，calc(100% - var(--gap))合法，calc(100% - var(--gap, 1rem))在 IE 中 fallback 不生效 -
:is()和:where()：简化多重选择器，比如.btn:is(:hover, :focus)比手写两个规则更简洁，但:is()会提升选择器优先级，:where()不会 -
@layer：能部分替代@import的顺序控制，但无法解决跨文件变量共享；必须手动按依赖顺序声明所有层，漏一层就失效
迁移时最危险的一步：变量赋值方式
SCSS 变量是静态常量，CSS 变量是继承链计算值。两者混用必须靠插值，且仅限于编译期可控场景。
- 正确写法：
:root { --primary: #{$primary}; }—— Sass 在编译时展开$primary并拼入属性值 - 错误写法：
:root { --primary: $primary; }—— 输出字面量$primary，浏览器当无效值处理 - 颜色函数链（如
darken($blue, 10%)）无法平移，必须提前算好值再注入，或改用运行时 JS 计算 +--derived-color - 空格敏感：
--foo: #{$bar} ;末尾多一个空格，某些旧版构建工具会解析异常
@import 行为差异导致 FOUC 或重复加载
Sass 的 @import "vars" 是同步编译时合并，整个文件内容被内联进当前 CSS；而原生 @import url("./vars.css") 是异步 HTTP 请求，可能触发 Flash of Unstyled Content（FOUC），也可能因缓存策略不同造成重复加载。
实操建议：
- 第一步不要直接删
.scss，先用postcss-import模拟 Sass 的@import行为，验证构建是否仍通 - 把所有
$color提升到:root，值必须是纯 CSS 字符串（十六进制、RGB、关键字），不能留darken($blue, 10%) - 嵌套规则（如
.card { & .title {} }）必须手动展开为.card .title，否则原生 CSS 完全不识别&
真正难的从来不是语法转换，而是把原本靠编译期确定的逻辑，重新设计成运行时可维护的结构——比如主题色衍生、断点计算、阴影层级映射。这些没法靠插值或 calc() 一劳永逸，得结合 JS 注入、@media 查询或构建时生成多套变量表来解。
