Как создавать цветовые оттенки, используя переменные CSS, аналогичные функции darken() в Sass? ⇐ CSS

[Anonymous]

Я ищу способ изменить переменную CSS, как в SCSS.

Определите цвет как основной — и я автоматически получу оттенки для фокуса и активных элементов. государства.
По сути, я хотел бы изменить одну переменную в переменных CSS и получить 3 оттенка одного и того же цвета.

Чего я хотел бы достичь в CSS

$color-primary: #f00;

.button {
background: $color-primary;

&:hover,
&:focus {
background: darken($color-primary, 5%);
}

&:active {
background: darken($color-primary, 10%);
}
}


пытаемся достичь:

:root {
--color-primary: #f00;
--color-primary-darker: #f20000 // var(--color-primary) * 5% darker
--color-primary-darkest: #e50000 // var(--color-primary) * 10% darker
}

.button {
background: var(--color-primary);
}

.button:hover,
.button:focus {
background: var(--color-primary-darker);
}

.button:active {
background: var(--color-primary-darkest);
}


Подробнее здесь: https://stackoverflow.com/questions/553 ... en-of-sass