前端开发中 SCSS 变量与 CSS 变量的区别与实践选择，—— 两种变量别混为一谈
一、SCSS 变量与 CSS 变量的本质区别
在 Vue 或任意前端项目中，我们经常同时使用 SCSS 与 CSS 变量。
它们的语法相似，但工作原理完全不同。
| 对比维度 | SCSS 变量 | CSS 变量（自定义属性） |
|---|---|---|
| 定义方式 | $primary-color: #409EFF; | --primary-color: #409EFF; |
| 使用方式 | color: $primary-color; | color: var(--primary-color); |
| 解析阶段 | 编译时（构建时由 Sass 替换） | 运行时（由浏览器解析，可动态修改） |
| 作用范围 | Sass 文件内部或导入链内 | CSS 层级继承（可以定义在 :root、类、标签中） |
| 是否动态 | ❌ 静态，构建后无法再改 | ✅ 可通过 JS 或类名动态切换 |
| 浏览器支持 | 所有浏览器（最终是普通 CSS） | 现代浏览器（IE 不支持） |
二、特别注意：SCSS 变量写在 :root 中是无效的！
很多人初学时，会这样写：
:root {$primary-color: #409eff;
}
然后希望这样用：
.button {color: $primary-color;
}
❌ 结果：编译报错！或者变量根本不生效。
原因解释
SCSS 变量在编译阶段就会被处理掉，它不存在于最终生成的 CSS 文件中。
Sass 预处理器在编译时根本不会识别
:root内的$变量，因为$变量并不是 CSS 属性。
换句话说：
$变量是编译阶段的指令，而:root是运行时的选择器。
二者不在同一个阶段生效。
正确写法应该是：
// variables.scss
$primary-color: #409eff;.button {color: $primary-color;
}
或者如果你想让 CSS 在运行时也能读取到一个变量，就要用 CSS 自定义属性：
:root {--primary-color: #409eff;
}.button {color: var(--primary-color);
}
三、在 Vue 项目中的使用注意事项
3.1 SCSS 变量：编译期常量，写在全局变量文件中即可
// src/styles/variables.scss
$primary: #409eff;
$font-size-base: 14px;
然后在 vite.config.ts 中全局注入：
css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";`}}
}
不需要 :root，也不应该放在 :root 中。
因为 $变量 只在 Sass 编译期存在，写在任何选择器里都不会影响结果。
3.2 CSS 变量：运行时变量，必须放在 :root 或具体选择器中
:root {--color-primary: #409EFF;
}.dark {--color-primary: #66b1ff;
}.button {color: var(--color-primary);
}
SS 变量存在于运行时，可以通过 JavaScript 动态修改：
document.documentElement.style.setProperty('--color-primary', '#ff0000');
四、如何结合使用两种变量？
实际开发中，两种变量往往结合使用，取长补短：
// 使用 SCSS 计算和生成 CSS 变量
$theme-light: #fff;
$theme-dark: #000;:root {--theme-light: #{$theme-light};--theme-dark: #{$theme-dark};
}
这样：
SCSS 负责计算和组织变量；
CSS 变量负责在运行时控制主题。
五、实践中的选型建议
| 场景 | 推荐使用 |
|---|---|
| 固定样式（颜色、间距、字号等） | ✅ SCSS 变量 |
| 动态主题、暗黑模式 | ✅ CSS 变量 |
| 响应式计算、尺寸比例 | ✅ SCSS 变量 |
| JS 需动态控制颜色 | ✅ CSS 变量 |
| 组件库（既要暴露主题接口，又要可计算） | 混合：SCSS 生成 CSS 变量 |
六、总结
SCSS 变量是编译期的计算逻辑，不需要、也不能放在 :root 中。
CSS 变量是运行期的样式变量，必须定义在 :root 或具体元素内。
二者一个属于“开发阶段”，一个属于“浏览器阶段”，
搞清楚它们的“时空位置”，就不会再混淆。