Why do I get "Undefined variable" errors with pseudo-selectors in SASS?

Question

The following is perfectly valid CSS:

#someID::before {
   --var: 1px;
}

.someClass #someID::before {
   # use --var in here
}

But when I try to do the same thing in SASS, I get an undefined variable error:

#someID::before {
   $var: 1px;
}

.someClass #someID::before {
   # use $var in here
}

Am I misunderstanding how scoping works in SASS?

Answer 1

CSS variables ( CSS custom properties (variables) ) and SCSS variables are not the same. SCSS variables are for values. For example, let's say I have a brand guideline and I use the colours like this:

$black: #000;
$white: #fff;

And now I can use this way:

header {
  .topbar {
    background: $white;
  }
}

But CSS variables are similar. And also, you are declaring the variable in the global scope there.