SCSS变量引用CSS变量赋值后无法正常返回对应值如何解决？

问题根本原因 #

SCSS是预编译语言，所有@if这类逻辑都会在打包/编译阶段提前执行，而var(--xxx)是CSS原生的运行时语法，只有浏览器加载样式的时候才会解析它的实际值，SCSS编译阶段根本拿不到var(--dl-mode)对应的真实值，你拿这个表达式和字符串black做相等判断，永远都会走else分支，根本不是第二个变量拿不到值的问题。
你觉得第一个SCSS变量正常，只是因为你没有在SCSS层对$intro-img做任何逻辑处理，直接把它丢给CSS属性用，编译后输出的就是var(--intro-img-url)，浏览器会自动解析这个CSS变量的值，所以看起来功能正常。

解决方案 #

方案1：判断逻辑放SCSS层 #

如果你的模式切换不需要在前端运行时动态修改，直接用SCSS变量控制即可：

// 直接定义SCSS变量做判断
$dl-mode: black;

@if $dl-mode == black {
  :root {
    --dl-mode: #{$dl-mode};
    --dominant1-wmode-color: #030712;
    --dominant1-bmode-color: #ffffff;
  }
} @else {
  :root {
    --dl-mode: #{$dl-mode};
    --dominant1-wmode-color: green;
    --dominant1-bmode-color: #030712;
  }
}

方案2：判断逻辑放CSS层 #

如果你需要运行时动态切换主题（比如JS控制切换深色/浅色模式），就把判断逻辑改成CSS原生写法：

:root {
  --intro-img-url: url("../images/pexels-los-muertos-crew-7487374.jpg");
  --dl-mode: black;
}

$intro-img: var(--intro-img-url);

/* 用属性选择器做模式判断，配合JS修改根元素的data-mode属性即可动态切换 */
:root[data-mode="black"] {
  --dominant1-wmode-color: #030712;
  --dominant1-bmode-color: #ffffff;
}
:root[data-mode="white"] {
  --dominant1-wmode-color: green;
  --dominant1-bmode-color: #030712;
}

内容的提问来源于stack exchange，提问作者Ahmed Ragab