SASS/SCSS variables to CSS is possible?

Question

When trying to display in CSS the SASS variable that I declared, I don't get the variable itself in the CSS output file, but the value given to the variable.

To be more clear, this is what I get:

SCSS/SASS input

$gray__background: #2d2d2d;

:root {
    --gray__background: #{$gray__background};
}

body{
  background-color: $gray__background;
}

CSS "output"

:root {
 --gray__background: #2d2d2d;
}

body{
 background-color: #2d2d2d;
}

That's what I was expecting to get:

CSS "output"

:root {
  --gray__background: #2d2d2d;
}
body{
  background-color: var(--gray__background);
}

Short story: I want to know if the result in the CSS "auto generated" file background-color: var(--gray__background);, instead of background-color: #2d2d2d; is possible to achieve.

I use the Live Sass Compiler extension for VSCode.

Sorry if my question is a little bit vague. I'm new to coding.

Sahil M. · Accepted Answer · 2022-05-24 17:30:14Z

2

The :root variables are being declared in the SCSS, but are not being used, so they wouldn't show up on the CSS output. It looks like you'll have to use --gray__background in the SCSS rather than $gray__background so it becomes: background-color: var(--gray__background); .

Hope this helps.

answered May 24, 2022 at 17:30

Sahil M.

794 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brendon Medeiros Over a year ago

It did help! It looks like I was declaring the :root folder in SCSS folder and not really making use of it.

Brad Over a year ago

@BrendonMedeiros if his answer helped you, hit the checkmark next to his answer to give him credit for it

Brendon Medeiros Over a year ago

@Brad Sure thing I'll do! I was just waiting to see if other users would come with different solutions and explanations.

Collectives™ on Stack Overflow

SASS/SCSS variables to CSS is possible?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related