CODEWITHSUNDEEP
csssass
AlexH
AlexH

Reputation: 1127

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

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?

Upvotes: 1

Views: 333

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

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.

Upvotes: 1

Related Questions