scss 变量不返回 css 变量值

Question

我有两个css变量和两个scss变量，问题是最后一个scss变量根本不返回值。注意，两个sass变量的值来自CSS变量。第一个SCSS变量的值通常来自CSS变量。

:root {
--intro-img-url: url("../images/pexels-los-muertos-crew-7487374.jpg");
--dl-mode: black;
}
// the intro-img scss variable takes its value normally from the 
// css variable and there's no problem with it.
$intro-img: var(--intro-img-url);
// but the dl-mode scss variable doesn't take the css variable val
// and just return nothing
$dl-mode: var(--dl-mode);
@if $dl-mode == black {
:root {
--dominant1-wmode-color: #030712;
--dominant1-bmode-color: #ffffff;
}
} @else {
:root {
--dominant1-wmode-color: green;
--dominant1-bmode-color: #030712;
}
}

Answer 1

在:root的上下文中，--dl-mode设置为black，而$dl-mode设置为var(--dl-mode)。这是SCSS编译器在运行检查@if $dl-mode == black时将看到的内容，因此检查将始终为false。

SCSS不能查看CSS变量的值，因为它需要在编译时知道这些值，但这些值可能取决于HTML本身的上下文。例如，考虑以下内容:

:root {
--my-var: black;
}
.class {
--my-var: white;
}
$my-var: var(--my-var);
@if $my-var == black {
// How can you know the value within --my-var if you don't know if you're in a .class element or not?
}