How to use a SCSS variable as a CSS variable in :root scope

You can’t just add a SCSS variable as a CSS variable in :root scope like this:

--my-var: #$myVar;

Having # and $ together causes a parsing error. Instead, express your variable this way (note the use of curly brackets):

--my-var: #{$myVar};

How-tos

Tim Bennett is a web designer and developer. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.