SCSS中$变量必须先定义后使用，无提升机制；作用域由文件内文本顺序及@use导入顺序决定，@import已废弃，混用二者将导致作用域混乱。
$ 变量在 SCSS 中不会被“提升”，所谓“放在顶部”只是工程习惯，不是语言机制要求
SCSS 编译器按源码顺序解析，@use 和 @import 的位置才真正影响变量可见性，而 $ 变量本身没有类似 JavaScript 的 hoisting 行为。你在文件底部定义 $color: red;，然后在上面用它，编译直接报错：Undefined variable。
SCSS 变量必须先定义后使用
这是最常被误解的一点——很多人以为“像 CSS 自定义属性一样可以后声明、前引用”，但 SCSS 的 $ 变量是静态解析的，作用域由块级结构和导入顺序决定：
-
$变量只在声明它的文件（或@use导入链）中按文本顺序生效 - 同一文件中，不能在定义前使用该变量；跨文件时，依赖
@use的导入顺序 -
@import已被弃用，@use是强制模块化方案：变量默认不暴露，需显式as *或with才能进入当前作用域
为什么项目里总把 variables.scss 放最前面？
这不是语法要求，而是避免循环依赖和隐式覆盖的实际约束：
- 所有组件样式都依赖颜色、间距等基础值，variables.scss 必须在其他
@use之前加载 - 如果
buttons.scss在variables.scss之前被@use，它就无法访问$primary-color - Vite / Webpack 的
additionalData配置本质是“自动前置注入”，它绕过了手动@use顺序，但底层逻辑没变：变量必须先于使用者存在
容易踩的坑：混用 @import 和 @use
一旦项目中同时存在两种导入方式，变量作用域会混乱，典型表现：
-
@import "variables"后，@use "buttons"却提示$border-radius未定义 - 不同文件用
@import引入同一变量文件，导致重复定义警告甚至值被覆盖 -
@use "vars" as v后写color: v.$primary-color—— 错误！@use不会把$前缀变量转成命名空间属性，要用as *或显式with传入
真正关键的不是“物理位置在顶部”，而是**变量声明在依赖链的上游节点**。哪怕 variables.scss 在磁盘上排在最后，只要构建配置确保它被第一个注入，就满足条件。反过来，如果靠手写 @use 但顺序错了，放再上面也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
