I was having a hard time getting some CSS Custom Properties (CSS variables) to take on some hex values that I was holding in some SCSS vars, after updating a number of libraries in my project.

What was odd was that the following code was working fine:

$foo: #ccc;

html, body {
  background: $foo;
}

In the browser's dev tools I would see: background: #ccc; and the background would be grey, as expected.

But this code didn't work:

$foo: #ccc;

html {
  --my-grey-color: $foo;
}

Oddly enough in the browser dev tools, I'd then see --my-grey-color: $foo, w/o the SCSS variable's value interpolated.

I finally came across this comment:
#1943 (comment)

I tried wrapping the variable reference in #{} and bingo it worked!

So here's my question.... while I'm glad I finally have a way forward, and thankful for that comment on that thread.... Why is it that the #{} is needed only when trying to interpolate values for CSS Custom Properties, but seems to be working just fine for others?

• NPM version (npm -v): 6.9.0
• Node version (node -v): 10.15.3
• Node Process (node -p process.versions):

{ http_parser: '2.8.0',
  node: '10.15.3',
  v8: '6.8.275.32-node.51',
  uv: '1.23.2',
  zlib: '1.2.11',
  ares: '1.15.0',
  modules: '64',
  nghttp2: '1.34.0',
  napi: '3',
  openssl: '1.1.0j',
  icu: '62.1',
  unicode: '11.0',
  cldr: '33.1',
  tz: '2018e' }

• Node Platform (node -p process.platform): darwin
• Node architecture (node -p process.arch): x64
• node-sass version (node -p "require('node-sass').info"):

 node -p "require('node-sass').info"
node-sass	4.11.0	(Wrapper)	[JavaScript]
libsass  	3.5.4	(Sass Compiler)	[C/C++]

• npm node-sass versions (npm ls node-sass):

 npm ls node-sass
[email protected] /Users/matthewmarcus/dev/omnisci/immerse2
└── [email protected]