How to specify colors in scss?

Question

css

For the first time I am building a site for wordpress using sass and the following difficulty arose.
I specify colors through root

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

I do this so that in the wordpress customizer you can change the color. Now in scss files I refer to these colors.
But how do I make a function that will generate the following:

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

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

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

?????
If doing this is complete nonsense, tell me how best to do it.

Answer 1

I solved the issue, removed this div to the very bottom of the html, but the question of why z-index did not work remained

Answer 2

You need to prioritize one thing.
I prefer css variables, but I store configs in sass variables:

$color-black: #000;

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

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

In order not to write properties twice (if you need fallbacks), you can use a post-css plugin, like this https://github.com/johnwatkins0/postcss-custom-pro...