SCSS variable error in Codepen

Hey folks,

I’m getting this error when I create SCSS variables in Codepen:

Error: Undefined variable.
╷
43 │ background-color: $cta;
│ ^^^^
╵
pen.scss 43:21 root stylesheet

When I do the regular --varName: value; it works, but I want to use SCSS and can’t figure out what’s the issue.

Any help would be much appreciated! Here’s my link:

https://codepen.io/robaish/pen/OJbLGze

dont declare SCSS variables in the root or inside any selector like you do with regular CSS variables
They should be simply placed in the CSS code

Thanks! I took the root away and now I’m getting another error:

Error: expected "{".

Why shouldn’t I declare variables in :root /html? Is this a Codepen thing?

its SASS syntax. Recall the SASS curriculum(if you did it), you didnt declare SASS variables inside CSS selectors. CSS variables on the other hand are declared inside selectors

Cool, thanks! I got it to work now. Haven’t done SASS yet, I’m only in the RWD projects.