Quiero cambiar con javascript algunas variables SASS/CSS para cambiar el color de varios elementos. 😅

¿Cómo puedo enviar variables SASS a CSS como variables? Lo probé como en la documentación de Sass , pero me da error, al compilar el CSS.

Aquí el 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;

Aquí mi código SASS:

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

Estoy usando un entorno NodeJS con un gulpfile.js. Mi versión de gulp-sass es 4.1.0

Pasa si elimino esta parte:

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

Tal vez exista una mejor manera de manipular las variables SASS con javascript. Si alguien tiene una idea o documentación, esto realmente me ayudaría 😊

Actualización / Solución:

Al usar un convertidor de CSS a SASS , descubrí que tengo que agregar \ antes del elemento :root

La solución se ve así en SASS:

 $primary_color: #ff2aad \:root --primary_color: #{$primary_color} h1 color: var(primary_color: #ff2aad);

No encontré ninguna documentación sobre esto, pero parece funcionar perfectamente bien sin errores ni problemas. 😊

Gracias por todo lo que trató de ayudar. Tú rockeas 🤘