Unable to set SCSS variable to CSS variable?

Question

Consider the following SCSS:

$color-black: #000000;

body {
    --color: $color-black;
}

When it is compiled with node-sass version 4.7.2, it produces following CSS:

body {
    --color: #000000; 
}

When I compile the same SCSS with version 4.8.3 or higher, it produces following:

body {
    --color: $color-black; 
}

What am I missing? I checked release logs, but could not found anything useful. Also, I wonder if this change is genuine why does it have only minor version change? Should it not be a major release?

Also, what is my alternative? Should I use Interpolation?

Yup, use string interpolation, i.e. --color: #{$color-black};. See: github.com/sass/node-sass/issues/2336 — Terry
– Terry, Commented May 6, 2018 at 20:14
The title is misleading w.r.t. the direction of the attempted assignment. — Martin
– Martin, Commented Apr 9, 2024 at 8:31

Terry · Accepted Answer · 2018-05-06 20:17:03Z

181

Just use string interpolation:

$color-black: #000000;

body {
    --color: #{$color-black};
}

Apparently the old behaviour is not intended and violated the language specs of SASS:

answered May 6, 2018 at 20:17

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

Comments

Persijn · Accepted Answer · 2018-05-06 20:39:06Z

16

scss and css

I found a workaround to mapping the scss variables to css variables.

See Terry's answer for better use

Scss:

// sass variable map 
$colors: (
  color-black: #FFBB00
);

// loop over each name, color
:root {
  // each item in color map
  @each $name, $color in $colors {
    --#{$name}: #{$color};
  }
}

Css:

:root {
  --color-black: #FFBB00;
}

edited May 6, 2018 at 20:39

answered May 6, 2018 at 20:09

Persijn

15.1k4 gold badges46 silver badges73 bronze badges

Comments

controlZed · Accepted Answer · 2019-07-11 14:14:51Z

3

I had an issue with older sass versions.

Trying to compile a list of variables coming from an array, it would get stuck with the double dash. Here's my solution in case it helps someone


$var-element:'--';

:root {
    @each $color in $color-variables {
     #{$var-element}#{nth($color, 1)}: #{nth($color, 2)};   
    }
}

answered Jul 11, 2019 at 14:14

controlZed

311 bronze badge

Collectives™ on Stack Overflow

Unable to set SCSS variable to CSS variable?

3 Answers 3

Comments

scss and css

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

scss and css

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related