A scss variable doesn't return the css variable value-CodePudding

I have two css variables and two scss variables , the problem is the last scss variable doesn't return a value at all. note that the values of the two sass variables comes from the css variables. the first scss variable takes its value normally from the css variable.

: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;
  }
}

CodePudding user response：

Even though --dl-mode is set to black in the context of :root, the value of $dl-mode is set to var(--dl-mode). This is what your SCSS compiler will be seeing when it runs the check @if $dl-mode == black, so that check will always be false.

SCSS cannot look inside the values of CSS variables, because it needs to know those values at compile time but those values may depend on context within the HTML itself. For example, consider the following:

: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?
}