请教:root内变量与上方$变量的区别及语法疑问

先明确你代码里两个变量的本质：

• $primary/$secondary是Sass预处理器变量
• --data-color-primary/--data-color-secondary是原生CSS自定义属性

核心区别 #

1. 运行时机不一样 #

• 预处理器变量是编译时生效：在Sass编译成普通CSS的过程中，$primary会直接被替换成#ffcc00，最终输出的CSS文件里根本看不到$primary这个变量名。
• CSS自定义属性是运行时生效：浏览器解析CSS的时候才会处理这些--开头的变量，它的值可以在页面运行时通过JS修改，也能根据不同的元素、媒体查询动态调整。

2. 作用范围与能力不同 #

• 预处理器变量的作用范围遵循Sass的规则：全局定义就全局可用，嵌套里定义就只能在嵌套范围内用，没法利用CSS的级联（比如子元素覆盖父元素变量），也不支持动态修改。但它能做变量运算、循环、条件判断这些复杂逻辑，适合写模块化的样式。
• CSS自定义属性遵循CSS的级联规则：:root里定义的是全局变量，所有子元素都能继承，还能在特定元素上重新定义覆盖全局值，支持JS操作，适合实现主题切换、响应式动态样式这类需求。

为什么不能只用一种语法？ #

只用预处理器变量（$）的局限 #

编译后值就固定死了，没法在浏览器里动态改。比如想做深色模式切换，或者根据用户操作改变主题色，用纯预处理器变量根本实现不了，因为编译完的CSS里都是硬编码的颜色值。

只用CSS自定义属性（--）的局限 #

缺少预处理器的高级功能：比如你想做颜色深浅变化（darken($primary, 10%)）、循环生成多个类名、条件判断样式，这些原生CSS自定义属性都做不到，写复杂样式会非常麻烦。另外，旧版IE完全不支持自定义属性，如果项目要兼容老浏览器，直接用--变量会失效。

为什么不能直接把$primary放进:root里？ #

:root是CSS的选择器规则，里面只能写合法的CSS属性和值，$primary是Sass的语法，浏览器根本不认识它，直接写的话会被当成无效代码忽略。

而#{$primary}是Sass的插值语法，作用就是编译时把预处理器变量的具体值插入到CSS代码里，最终输出的CSS会变成：

:root{ 
  --data-color-primary: #ffcc00;
  --data-color-secondary: #4b4b4b;
}

这样浏览器就能正常识别这些原生自定义属性了。

内容的提问来源于stack exchange，提问作者Madara uchi