генерация цветовых оттенков с переменными CSS: систематический метод

Вопрос

мы можем имитировать функциональность функции Sass's Darken () с использованием переменных CSS к Сгенерировать оттенки определенного цвета?

подход с использованием относительного синтаксиса цвета

CSS вводит «относительный синтаксис цвета», который включает следующее:

: root { -Color-Primary: #F00; -Color-Primary-Darker: HSL (из VAR (-цветовой) H S Calc (L-5)); -Color-Primary-Darkest: HSL (из VAR (-цветовой) H S Calc (L-10)); }

:root {
  --color-primary: #f00;
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

вот как это работает:

]

-color-primary: определить базовый цвет. на 5% с помощью hsl (). Используйте эти переменные для стиля элементов:
. Кнопка { Фон: var (-Color-Primary); } .button: Whover, .button: фокус { Фон: var (-цветовой датчик); } .button: Active { Фон: var (-Color-Primary-Darkest); }
Этот подход позволяет динамически определять цветовые оттенки без изменения цветовой переменной, достигая желаемого градиента с тремя оттенками.