SCSS 中不存在变量提升，编译器严格按文本顺序解析，变量必须在使用前定义；@use 导入顺序决定变量可见性，!default 仅在未定义时生效，SCSS 变量与 CSS 变量及层叠规则完全无关。
SCSS 中根本不存在变量提升（hoisting）——这个说法本身就是错的，直接导致你误判 CSS 覆盖顺序。
SCSS 变量不提升，编译器按文本顺序逐行解析
你在文件底部写 $color: red;，然后在上面用 color: $color;，Sass 编译器立刻报错：Undefined variable "$color"。这不是“提升没生效”，而是它压根不尝试提升。SCSS 是纯顺序解析：遇到变量使用，就往前找定义；找不到，就失败。
常见错误现象：
- 把
variables.scss放在components/button.scss后面@use，结果按钮里用$primary-color报错 - 以为“写在顶部”是语法要求，其实只是工程约束：变量必须出现在所有使用者之前
@use 导入顺序才是真正的“覆盖顺序控制点”
真正影响变量是否可用、取哪个值的，不是你在单个文件里怎么排，而是 @use 的先后顺序。比如：
立即学习“前端免费学习笔记（深入）”；
@use "src/styles/variables" as *; @use "src/components/button";
这样 button 才能访问 $primary-color；反过来，button 就看不到变量。
容易踩的坑：
- 混用
@import和@use：前者全局注入，后者模块隔离，作用域会打架 - 在
@use "x" as v后写v.$color—— 错！@use不把$变量转成命名空间属性，要用as *或with ($color: ...) - 以为
!default能覆盖已定义变量 —— 它只在变量未定义时生效，顺序错了就完全跳过
CSS 覆盖顺序和 SCSS 变量完全无关
$color: blue 编译后就是字面量 color: blue，它不生成、不控制、也不影响任何 --color 或层叠行为。你想改运行时样式，得靠 CSS 层叠规则，不是重写 SCSS 变量。
真正要覆盖 CSS 变量，必须：
- 在更具体选择器里重声明同名
--xxx，例如.theme-dark { --color-primary: #1e40af; } - 确保 HTML 结构包裹到位：
<div class="theme-dark"><button></button></div> - 别指望
$color-primary !global会同步到var(--color-primary)—— 它俩生命周期不同、存储位置不同、连通信协议都没有
最常被忽略的一点：你以为在调 SCSS 变量顺序，实际是在调 CSS 输出的静态值顺序；而真正决定浏览器最终渲染效果的，是 <link> 加载顺序、选择器特异性、以及 --xxx 的继承链 —— 这三者和 $ 变量毫无关系。
