Sass变量在编译后彻底消失，仅保留展开值；必须用#{$var}插值才能导出为CSS变量，直接写$var会导致无效CSS。
因为 Sass 变量在编译阶段就被替换成具体值了，最终生成的 CSS 文件里根本不会保留 $variable 这种语法——它不是“隐藏”，而是彻底消失。
变量在编译时就被“蒸干”了
Sass（包括 SCSS）是预处理器，不是运行时语言。Webpack、Vite 或 sass CLI 在构建时就把所有 $color、$spacing-sm 替换为 #3498db、0.5rem 这类字面量，然后输出纯 CSS。浏览器加载的只有这些展开后的规则，DevTools 的 Styles 面板里永远看不到 $primary。
常见错误现象：
- 你在
variables.scss里写了$primary: #007bff;，但打开编译后的main.css，搜$primary什么都找不到 - 用
@debug $primary能看到值，但最终 CSS 里没对应注释或占位符——@debug只影响终端输出，不进 CSS
:export 不能写在普通 .scss 文件里
想让 JS 读取 Sass 变量？必须用 .module.scss 后缀 + :export 块，否则 import vars from './xxx.scss' 拿到的是空对象。
立即学习“前端免费学习笔记（深入）”；
关键限制：
-
:export只在 CSS Modules 模式下生效，即文件名必须是xxx.module.scss -
:export必须写在顶层，不能嵌套在@media或选择器内 - 值必须是字符串/数字/布尔，Sass 变量得用插值：例如
primaryColor: #{$primary};，直接写primaryColor: $primary会报错 - 颜色会被转成
rgb(0, 123, 255)，若需保持#007bff，得用inspect($primary)，但可能带多余引号
为什么不能把 $variable 直接当 CSS 自定义属性值用？
写 :root { --primary: $primary; } 是无效的——CSS 属性值上下文不解析 Sass 语法，必须显式插值：--primary: #{$primary};。
容易踩的坑：
- 漏掉
#{}：写成--color: $primary→ 编译后就是字面量$primary，浏览器忽略整条声明 - 插值位置错误：不能用在选择器、
@media条件或@keyframes名称里，只允许出现在属性值位置 - 混用
@import和@use：只要文件里有任意@import，整个文件降级为 legacy 模式，@use失效，变量作用域全乱
真正容易被忽略的点：变量是否“可见”，取决于你问的是哪个环节——编译前？编译中？还是浏览器运行时？Sass 变量只活在编译前那一瞬，之后就只剩它的尸体（即替换后的值），别指望在 CSS 文件里“找得到”它。
