SCSS变量不能直接赋值给CSS变量，必须用插值#{$var}；@use后需加命名空间前缀；CSS变量适合运行时主题切换，SCSS变量适合编译期设计令牌。
直接用 $ 变量赋值给 --css-var 会失败，因为 SCSS 编译器不会展开变量名——你得靠插值 #{$var} 才能正确注入值。
SCSS变量不能直传CSS变量，必须用插值语法
SCSS 的 $primary 是编译期静态常量，而 --primary 是运行时继承链计算值。两者语义不同，不能混写。
- 错误写法：
::root { --primary: $primary; }→ 输出字面量$primary，浏览器解析为无效值 - 正确写法：
::root { --primary: #{$primary}; }→ Sass 在编译时展开并拼入实际值，如#{$primary}→#3bbfce - 颜色函数（如
darken($blue, 10%)）无法在运行时复现，必须提前算好再注入：--primary-dark: #{darken($blue, 10%)}
@use 模块下访问变量要带命名空间前缀
迁移到 @use 后，所有变量都默认隔离在模块命名空间里，不能再裸写 $spacing-sm。
- 原
@import "variables"后可直接用$spacing-sm；@use "variables"后必须写成variables.$spacing-sm - 推荐显式重命名：
@use "src/styles/vars" as v;→ 后续统一用v.$color-primary，避免歧义 - 第三方库（如 Bootstrap 5.3+）也需加前缀：
bs.$font-size-base，不能省略bs.
原生CSS变量更适合动态主题，SCSS变量仍适合设计令牌固化
别试图把所有 SCSS 变量都转成 CSS 变量——它们解决的问题不同。
立即学习“前端免费学习笔记（深入）”；
- CSS 变量适合运行时切换（如深色模式、用户偏好），但不支持运算、条件、循环等逻辑
- SCSS 变量适合编译期确定的设计系统令牌（如
$radius-md: 8px），可参与@if判断、@each遍历、单位换算等 - 混合策略更实用：用 SCSS 管理设计令牌，再批量导出为 CSS 变量供 JS 控制主题：
::root { --radius-md: #{$radius-md}; }
迁移后最常被忽略的坑：BEM 类名拼接失效
SCSS 中常用 &__element 生成 BEM 类名，但原生 CSS 嵌套不支持中段插入，&__element 会被当作字面量处理。
- 原写法：
.card { &__header { ... } }→ 编译为.card__header - 原生嵌套只支持后缀拼接：
&-header→.card-header，不支持&__header或&-header--large - 若项目重度依赖 BEM，不要指望原生嵌套完全替代 SCSS 嵌套，保留 SCSS 处理类名生成，仅用原生嵌套做简单父子关系即可
