sass无法读取css变量，只能将sass变量编译为css变量；需在:root中输出纯值或预计算的衍生值，避免运行时逻辑；混用时注意作用域、优先级及js配合切换主题。
怎么在Sass里读取并转成CSS变量
Sass本身不支持运行时读取CSS变量，但可以反向操作：用Sass变量生成CSS变量。关键不是“注入”，而是“编译时输出”。如果你期望像var(--color-primary)那样动态取值再传给Sass函数，这条路走不通——Sass在构建阶段就结束了，CSS变量是浏览器运行时才生效的。
实操建议：
- 把主题色、断点、z-index层级等稳定配置项定义为Sass变量（如
$primary-color: #007bff），再用:root块批量输出为CSS变量 - 避免在
:root里写复杂逻辑（比如lighten($color, 10%)），Sass会报错——它只允许纯值或简单表达式，不能调用颜色函数后直接塞进--var - 如果需要衍生变量（比如
--primary-light），必须在Sass里先算好，再输出：--primary-light: #{lighten($primary-color, 10%)}
Sass变量和CSS变量混用时样式失效怎么办
典型现象是写了color: var(--text-color)但没生效，或者开发者工具里看到变量值是unset。这不是Sass的问题，而是作用域和优先级混乱导致的。
实操建议：
- CSS变量遵循CSS层叠规则，
:root定义的变量可全局用，但组件内部.card { --bg: white }只会作用于.card及其子元素 - 别在Sass
@mixin里直接插var(--x)当参数用——比如@include theme-bg(var(--bg))会报错，Sass解析不了var()语法，得改用Sass变量传参 - 调试时打开浏览器“Computed”面板，看
color最终计算值，如果显示var(--text-color)没被替换，说明该变量未定义或被覆盖
用Sass map生成CSS变量集的坑
很多人用$theme: (primary: #007bff, success: #28a745)配合@each批量输出--primary、--success，看起来很干净，但容易踩三个坑。
实操建议：
- 嵌套map（如
(light: (bg: #fff, text: #333))）会导致生成的CSS变量名带括号或空格，浏览器不认——必须扁平化，用连字符拼接键名：--light-bg -
@each $key, $val in $theme中，$val如果是rgba(0,0,0,0.5)，直接插进:#{$val}会输出rgba(0, 0, 0, 0.5)，没问题；但如果是1rem或bold，也得确保单位/关键字合法 - 不要在循环里写
@if type-of($val) == 'color'做类型判断再处理——Sass 1.70+才支持type-of对所有类型准确识别，旧版本可能把数字当number、把1px当string，结果漏转换
需要运行时切换主题？Sass做不到，得靠JS配合
如果你的目标是用户点击按钮切换深色模式，且想复用Sass里定义的颜色体系，那Sass只负责生成初始CSS变量，切换动作必须由JS完成。
实操建议：
- 让Sass输出两套变量：一套默认（
:root），一套带[data-theme="dark"]前缀（[data-theme="dark"] :root），这样JS只需切data-theme属性，不用重写全部CSS - JS里别用
document.documentElement.style.setProperty('--color', ...)逐个设——性能差，还容易漏；改用切换class或data-属性触发预设的CSS规则 - 注意CSS变量有继承性，但
font-size这类属性不会自动继承到伪元素（::before），如果Sass生成的变量用在伪元素里，要显式声明inherit或重新var()
最常被忽略的是：Sass生成的CSS变量一旦输出，就跟Sass彻底无关了。后续任何修改都得走构建流程重编译，没法热更新。如果项目已有大量内联style="color: var(--x)"，又依赖JS动态改--x，那就别指望Sass能“智能响应”——它只管编译那一刻的快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
