6

Not too long ago I made a project that used a combination of SASS variables and CSS custom properties. I defined my Sass variables and then used those to create my CSS custom properties. Everything worked great. Now I'm trying to do the exact same thing, using the same code and loaders (Webpack) and it's not working and I can't figure out why.

I have a style.scss file that looks like this:

$var1: #ff3344;
h1 { color: $var1; }
:root { --color1: $var1; }

When I build my project with Webpack using sass-loader, css-loader, and style-loader I get the following output:

h1 { color: #ff3344; }
:root { --color1: $var1; }

For some reason, the $var1 gets replaced for the h1 but not for the --color1.

Seeing as I did this before with no issue, I expected sass-loader may be the cause. But I downgraded sass-loader to 6.0.7 which was the same version I used in the project that this worked in but I'm still having this issue. Why isn't sass-loader replacing $var1 when it gets assigned to --color1 ?

Daniel D
  • 121
  • 6
  • are you sure this worked? :root { --color1: $var1; } .Existing sass compilers doesn't convert this – karthick Jun 12 '18 at 17:03
  • On the other hand this works :root { --color1: #{$var1}; } – karthick Jun 12 '18 at 17:05
  • I'm sure. Here's some sample code from my working project: `:root { @each $name, $color in $page-colors { --color-#{$name}: $color; } }` – Daniel D Jun 12 '18 at 17:07
  • I guess using `#{}` will work. But I dont understand why I didn't have to do that in my previous project. I had about 100 CSS properties assigned to Sass variables just like above and it worked fine. – Daniel D Jun 12 '18 at 17:12
  • Try comparing the node-sass version. It could very well be a bug in the new version – karthick Jun 12 '18 at 17:15
  • That's it! This new version of `node-sass` is what's causing it. Before it let me do it this way, now it doesn't. Thank you karthick! – Daniel D Jun 12 '18 at 17:22
  • No problem. happy coding and debugging – karthick Jun 12 '18 at 17:22

1 Answers1

7

Custom variable values only support SassScript inside #{}.

For example if you want to have array of colors:

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
$colors: map-merge((
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
), $colors);

@each $color, $value in $colors {
    --#{$color}: #{$value};
}
Joshua Stephen
  • 196
  • 1
  • 8
  • Docs on this: https://sass-lang.com/documentation/breaking-changes/css-vars – feeela Nov 01 '22 at 12:08
  • Btw: pasting „Custom variable values only support SassScript inside #{}“ inside a SCSS code comment will break compilation at the `#{}` inside a comment. – feeela Nov 01 '22 at 12:11