Как правильно указывать цвета в scss?

Question

[m4son]

В первый раз верстаю сайт для wordpress с иcпользованием sass и возник следующая сложность.
Цвета я указываю через root

:root {
  --mycolor-1: #488cff;
  --mycolor-2: #ffff8c;
}

Это я делаю для того, чтобы в customizer`е wordpress`a можно было менять цвет. Теперь в scss файлах я ссылаюсь на эти цвета.
Но как мне сделать функцию, которая будет генерировать следующее:

$color-1: var(--mycolor-1);

.text-color-1 { color: $color-1; }

.bg-color-1 { background-color: $color-1; }

?????
Если так делать это бред полный, подскажите, как лучше сделать.

Comments

[Михаил]

переменная для переменной?

[m4son]

Михаил, ну вот у меня есть сайт на wordpress, где уже скомпилированы файлы css. В костомайзере я меняю цвет, и он должен поменяться, где-то это задний фон, где-то цвет текста.

[Михаил]

m4son, .text-color-1 { color: var(--mycolor-1); }

так что мешает использовать

[m4son]

Михаил, потому что где-то цвет указываю через класс, где-то напрямую в селекторе

[Михаил]

m4son, и?

[uRoot]

:root {
--mycolor-1: #488cff;
--mycolor-2: #ffff8c;
}

тут используются CSS переменные

.text-color-1 { color: $color-1; }
.bg-color-1 { background-color: $color-1; }

а тут SCSS

Не смешивайте переменные SCSS и CSS. Используйте какие-то одни

Answer 1

[Сергей delphinpro]

Вам нужно поставить во главу угла что-то одно.
Я отдаю предпочтение css переменным, но конфиги храню в sass переменных:

$color-black: #000;

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

.class {
  color: $color-black; // fallback
  color: var(--color-black);
}

Чтобы не писать два раза свойства (при необходимости фоллбеков), можно заюзать post-css плагин, вроде этого https://github.com/johnwatkins0/postcss-custom-pro...