SASS variables to CSS variables (gulp-sass)

Question

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

SASS variables to CSS variables (gulp-sass)

0 Answers