I want to change with javascript some SASS/CSS variables to change the color of multiple elements. 😅

How I can send SASS variables to CSS as variables? I tryed it like in the documentation of Sass, but it gives me an error, on compiling the CSS.

Here the Error:

Error in plugin "sass" Message:
dev\sass\_settings.sass Error: Invalid CSS after "$primary-color: #ff2aad;": 
expected 1 selector or at-rule, was "root: {"
    on line 5 of dev/sass/_settings.sass
    from line 1 of dev/sass/style.sass
    $primary-color: #ff2aad;

Here my SASS code:

$primary-color: #ff2aad

:root
  --primary-color: #{$primary-color}

Im using an NodeJS enviroment with an gulpfile.js. My gulp-sass version is 4.1.0

It passes if I remove this part:

:root
      --primary-color: #{$primary-color}

Maybe it exist an better way to manipulate SASS variables with javascript. If someone have an idea or documentation this would really help me 😊

Update / Solution:

I found out by using an CSS to SASS Converter that I have to add an \ before the :root Element

The Solution looks like this in SASS:

$primary_color: #ff2aad

\:root
  --primary_color: #{$primary_color}

h1 
  color: var(primary_color: #ff2aad);

I didn't found any documentation about this but it seams to work perfectly fine without error or issues. 😊

Thanks on all that tryed to help. You Rock 🤘