Блог

Я хочу изменить с помощью javascript некоторые переменные SASS/CSS, чтобы изменить цвет нескольких элементов. 😅

Как я могу отправлять переменные SASS в CSS в качестве переменных? Я попробовал это, как в документации Sass, но это дает мне ошибку при компиляции CSS.

Здесь ошибка:

 Error in plugin "sass" Message:
devsass_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;
 

Вот мой дерзкий код:

 $primary-color: #ff2aad

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

Я использую среду NodeJS с gulpfile.js.
Моя версия gulp-sass-4.1.0

Это пройдет, если я удалю эту часть:

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

Возможно, существует лучший способ манипулировать переменными SASS с помощью javascript. Если у кого-то есть идея или документация, это действительно поможет мне 😊

Обновление / Решение:

Я узнал, используя конвертер CSS в SASS, что мне нужно добавить перед :root элементом

Решение выглядит так в SASS:

 $primary_color: #ff2aad

:root
  --primary_color: #{$primary_color}

h1 
  color: var(primary_color: #ff2aad);
 

Я не нашел никакой документации по этому поводу, но она отлично работает без ошибок или проблем. 😊

Спасибо всем, кто пытался помочь. Ты Потрясающая 🤘