SASS/SCSS variable not working with CSS variable assignment

Question

I have the following SCSS code:

@mixin foo($bar: 42) {
    --xyzzy: $bar;
}
bar {
    @include foo;
}

I would expect that I get CSS variable --xyzzy set to 42 on all bar elements. Instead of this, I get CSS stating bar { --xyzzy: $bar; }. The variable was not interpreted. I would need to use #{…} syntax instead to get the variable set.

Is this a feature of the SCSS/SASS? A bug? Can I get the interpretation working without enclosing the variable name in #{…}?

Actual result:

bar {
  --xyzzy: $bar;
}

Expected:

bar {
  --xyzzy: 42;
}

Youssouf Oumar · Accepted Answer · 2022-12-06 19:51:08Z

It's not a bug, it's how the Sass compiler works regarding CSS custom properties, known as CSS variables. The syntax #{…} is called interpolation, and it is the only way to inject dynamic values into a custom property. Here is a quote from the doc:

CSS custom properties, also known as CSS variables, have an unusual declaration syntax: they allow almost any text at all in their declaration values. What’s more, those values are accessible to JavaScript, so any value might potentially be relevant to the user. This includes values that would normally be parsed as SassScript.

Because of this, Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is. The only exception is interpolation, which is the only way to inject dynamic values into a custom property.

That's the reason why you have that behavior, and only doing so works:

@mixin foo($bar: 42) {
   --xyzzy: $bar;    // does not work
   --xyzzy: #{$bar}; // works
}

Web Allex · Accepted Answer · 2023-10-05 16:55:37Z

-1

I destroyed my brain for 2 hours trying to understand why it dosent work.

  --primary-color: #{map.get($dark-theme-app-var, primary-color)};
  --primary-color: map.get($dark-theme-app-var, primary-color);

and chatGpt did not catch that :). Thank you.

edited Oct 5, 2023 at 16:55

answered Oct 5, 2023 at 16:55

Web Allex

313 bronze badges

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

fbastien Jan 31 at 10:19

The question was already answered and accepted. What new or different information was your answer meant to bring compared to existing answer? To me, your answer looks just the same but far less explained and sourced, so useless...

Collectives™ on Stack Overflow

SASS/SCSS variable not working with CSS variable assignment

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related