scss变量是编译期静态常量，css变量是运行时动态属性；前者用$定义、编译后被替换消失，后者用--定义、保留在最终css中供js操作和继承。
SCSS变量和CSS变量根本不是一回事
编译时就没了的 $color 和运行时才起作用的 --color，名字像、用法像，但生命周期完全不同。你写 --main-color: $color;，Sass 编译器会直接报错或原样输出——它根本不认识这种混写。这不是 bug，是设计使然：SCSS 变量只在编译阶段参与计算和替换，而 CSS 变量是浏览器解析 CSS 时才开始生效的“活变量”。
必须用 #{$var} 插值才能把 SCSS 值塞进 CSS 变量声明
想让 SCSS 的值变成 CSS 变量的实际值，唯一可靠方式是插值。不加 #{} ，$ 符号会被当作文本字面量处理；加了，Sass 才会在编译时展开变量并拼进属性值里。
-
$primary: #3b82f6;→:root { --primary: #3b82f6; }正确写法：:root { --primary: #{$primary}; } - 错误写法：
:root { --primary: $primary; }（输出无效 CSS） - 插值也支持表达式：
--spacing-sm: #{rem(4)};，前提是rem()是你定义的函数 - 注意空格：
--foo: #{$bar} ;末尾多一个空格，可能导致某些旧版构建工具解析异常
calc()、filter()、clamp() 里混用 SCSS 变量要格外小心
这些函数在 CSS 中是运行时执行的，但 Sass 会优先尝试用自己的同名函数去解析。比如 min(10vh, $size)，Sass 会调用内置 min() 函数，而它不支持 vh 和 px 混算，直接报错。
- 正确做法：用
calc()包裹 + 插值：width: calc(#{$width} + 10px); - 对
clamp()同理：font-size: clamp(#{$min}, 1.25rem, #{$max}); -
filter: invert($value);会失败，因为 Sass 的invert()只接受颜色值；改用filter: invert(var(--invert-value));，再用 JS 或主题类控制--invert-value - 别在
calc()外层套 Sass 函数，比如round(calc(...))—— 这会让 Sass 尝试先算calc()，而它根本不会执行
CSS 变量作用域和 SCSS 变量作用域完全不重叠
你在 @media 里用 $breakpoint，和你在 .card { --shadow: #0003; } 里定义变量，彼此毫无关系。但容易误判的是：以为给 :root 设了 --color，再在 SCSS 里用 $color 就能自动同步——不行。它们之间没有绑定、没有监听、没有映射。
- SCSS 变量不能读取 CSS 变量的值（
$x: var(--y);无效） - CSS 变量也不能直接调用 SCSS 函数（
--z: darken($c, 10%);无效） - 真正需要“双向联动”时，得靠构建时生成（如用
@each循环生成多套主题 CSS 变量），或运行时 JS 注入（如根据prefers-color-scheme动态设--bg） - 最容易忽略的一点：CSS 变量继承是基于 DOM 树的，不是基于 SCSS 嵌套层级。哪怕你在
.modal { .header { color: var(--text); } }里用，--text仍是从最近的祖先元素上找，和 SCSS 文件结构无关
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
