SCSS变量嵌套不会导致CSS渲染冲突，因其在编译期即被替换为静态值并消失，浏览器仅处理最终硬编码CSS；所谓“冲突”实为变量未正确定义、未插值（如漏写#{}）、作用域失效或拼写错误所致。
为什么 SCSS 变量嵌套不会导致 CSS 渲染冲突，但容易被误认为“冲突”
根本不存在“变量嵌套导致渲染冲突”这回事——Sass 变量在编译期就完全消失，CSS 里压根没有变量。所谓“冲突”，99% 是你看到的样式没生效，其实是变量压根没被正确注入到 CSS 中，或者被覆盖、拼错、作用域失效了。
典型现象：你在 .card 里写了 $color: #007bff，然后 color: $color，结果浏览器里文字还是黑色；或者全局定义了 $primary，但在某个 @use 模块里用它时提示 “Undefined variable”。这不是 CSS 渲染冲突，是 Sass 编译阶段的变量传递失败。
- SCSS 变量不参与运行时，只影响编译输出；浏览器看到的永远是硬编码值（如
color: #007bff） - 所谓“嵌套变量”，其实是开发者误以为缩进层级能自动继承变量——Sass 不支持这种动态作用域
- 真正出问题的地方：变量声明位置、
@use作用域、插值#{}遗漏、或拼写大小写不一致（$Color≠$color）
如何让变量安全穿透嵌套块并正确输出到 CSS
嵌套规则本身不创建新变量作用域，但 @use、@mixin 和缩进结构会切断变量可见性。要让变量“穿过”嵌套生效，必须显式带入。
- 在嵌套块开头加
@debug $var—— 如果输出Debug: null或报错，说明变量根本不可见，别急着调样式 - 不要依赖父级已定义的变量，尤其在
@use模块内：必须用命名空间访问，例如colors.$primary，而不是直接$primary - 需要复用变量逻辑？封装成
@mixin并传参：@include theme-color($bg: $primary)，比在每个嵌套里重复声明更可靠 - 避免在嵌套中
@use—— 它只能出现在文件顶部；否则 Sass 直接报错，连编译都过不去
为什么 :root { --primary: $primary } 完全无效
这是最常被当成“变量冲突”的典型误判。Sass 解析器看到 --primary: $primary 时，根本不识别 $primary 是变量，而是把它当非法 CSS 值直接跳过整条声明。DevTools 里根本看不到这个自定义属性，不是“被覆盖”，是压根没生成。
立即学习“前端免费学习笔记（深入）”；
- 必须用插值：
:root { --primary: #{$primary}; }——#{}是唯一能把 SCSS 变量转成字符串塞进 CSS 原生语法的方式 -
#{}里不能写表达式：#{$primary + 'ff'}会报错；需先计算再插值，例如$primary-light: lighten($primary, 10%); :root { --primary-light: #{$primary-light}; } - 颜色变量插值后可能显示为
rgba(0, 0, 0, 0.5)或transparent，取决于 Sass 版本和上下文，别凭肉眼判断是否“对”
嵌套中变量名重复时，谁会赢
变量覆盖不是按 DOM 层级，而是按 Sass 编译顺序和作用域规则。同一文件中，后声明的同名变量会覆盖前面的；跨文件则取决于 @use 的导入顺序和命名空间是否隔离。
- 用
@use "xxx" as *是危险操作：多个模块的$spacing会互相覆盖，且无警告 - 推荐写法：
@use "base/vars" as base;，然后统一用base.$spacing-sm—— 即使另一个模块也叫$spacing-sm，也不会干扰 - 嵌套块内重新声明
$color，只在该块内生效；但它不会“屏蔽”外层同名变量，除非你显式用!global（不推荐） - Vue 单文件组件中，
<style lang="scss">内的变量默认是局部作用域，但若用了@import，就会全局污染，务必改用@use
