Как менять скриптом переменные заданные в препроцессоре SASS

Question

Верстка сайта сделана в препроцессоре sass.

Основные цвета сайта записанные в переменные, типа:

$primary = #000

Сейчас веду работу над скриптом который будет менять основной цвет сайта.

Вопрос как менять эту переменную?

Была мысль что в основной css передаются эти переменные, но нет, классические css переменные и в sass разные вещи.

Если какое то решение или придется переписать на классические?

Answer 1

Вы планируете менять цвета в runtime, тогда как sass работает на этапе компиляции, приводя все к обычному CSS.

Вам следует использовать несколько переменных для нужных цветов:

$color-primary: red;
$color-secondary: blue;

Определить их для отдельных классов:

.primary {
   color: %color-primary;
}

.secondary {
   color: %color-secondary;
}

После чего Вы сможете управлять сменой цвета через добавление / удаление классов:

const changeColor = () => {
   const p = document.querySelector("p")
   p.classList.add("secondary")
}