sass嵌套与css自定义属性互不兼容，var()不能参与sass编译期运算；正确做法是先定义sass变量，再通过#{}插值导出到:root，局部--x仅限自身及后代作用域。
不能直接在 Sass 嵌套块里写 --color-primary: #3498db 并指望它被计算或继承——原生 CSS 自定义属性（var(--x)）和 Sass 嵌套是两套独立机制，混用不等于互通。
原生 CSS 变量不能放进 Sass 选择器嵌套里
很多人试图这样写：
nav {
--nav-bg: #2c3e50;
&__item {
background-color: var(--nav-bg); // ✅ 可以
color: lighten(var(--nav-bg), 20%); // ❌ 报错：Sass 不认识 var()，更不会解析它
}
}
问题在于：lighten() 是 Sass 函数，只接受颜色值（如 #2c3e50 或 $nav-bg），不能接收字符串 var(--nav-bg)。浏览器运行时才解析 var()，而 Sass 编译早已结束。
- 所有带
var(--x)的表达式只能出现在最终生成的 CSS 属性值中，不能参与 Sass 编译期运算 - 嵌套块内可以引用
var(--x)，但仅限于赋值语句右侧，且不能套函数、不能插值、不能做算术 - 想动态调色？得靠
color-mix()、hsl()这类原生 CSS 函数，比如background-color: color-mix(in srgb, var(--nav-bg), white 20%)
Sass 变量导出为 :root 自定义属性必须用 #{} 插值
真正安全、可控的做法是：先定义 Sass 变量，再统一注入到 :root，而不是在嵌套结构里零散声明。
:root {
--primary: #{$primary-color};
--primary-light: #{lighten($primary-color, 10%)};
--font-size-sm: #{$font-size-sm};
}
注意几个细节：
- 颜色值不用引号，
--primary: #{$primary-color}→--primary: #3498db；加了引号会变成字符串字面量 - 带单位的数值（如
1rem、4px）可直接插值，Sass 会保留单位 - 如果变量未定义或为
null，插值结果为空，CSS 将失效；建议加守卫：@if variable-exists(primary-color) { ... } - 不要写
--color: #{var(--x)}——var()不是 Sass 函数，#{}里放它会触发语法错误
嵌套选择器中读写自定义属性要分清作用域
你在 nav 嵌套里写的 --nav-bg，只对当前元素及其后代生效（除非显式继承），不是全局变量。这和 :root 下定义的不一样。
-
:root定义的--x全局可读，JS 可通过getComputedStyle(document.documentElement).getPropertyValue('--x')拿到 - 局部定义的
--x（比如在.card { --card-padding: 1rem; }）只能被其子元素用var(--card-padding)读取，父级或同级拿不到 - 局部变量无法被 JS 直接读取（
getComputedStyle(el)能读，但前提是该元素自己设了或继承了该变量） - 避免在嵌套中重复定义同名变量，容易覆盖上级值，调试时难以溯源
最易被忽略的一点：Sass 嵌套本身不产生运行时作用域，它只是编译成普通 CSS 选择器；而 var(--x) 的作用域是 DOM 树+继承链。两者逻辑层级不同，强行“嵌套变量”只会让维护成本飙升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
