Статья строится на объединении 3х методах. И в самой статье я описываю каждый из. Данное описание относится к конкретному методу преобразования.
А в целом, статья нацелена на изменение CSS var имея на старте HEX формат.
Не совсем ясно, зачем вы все эти операции делали, и чего добились. Было бы удобнее воспринимать это в таком виде — Есть такая задача — решалась так — а теперь решается так. Вы примерно это и хотели, как я понимая, но со стороны не очень понятно.
Добавил описание задачи в начале статьи.
— это заблуждение, у них разные цели. И эта фраза — показатель того, что вы еще не во всем разобрались. Там даже в комментария к ней написано:
Это предложение написано от предосторожности комментариев: Зачем CSS переменные, есть же Sass??!!
И если вы посмотрите на код внимательно, то как раз вы увидите как я использую их совместно.
Нет необходимости использовать HSL формат в моих проектах, все цвета задаёт дизайнер в макете. Далее это верстается без изменений. Если вы хотите использовать HSL, а не rbg, то замените их в приведенных выше примерах, сути дело не меняет.
p.s большинство используют HEX формат и для многих эта статья будет актуальной. Смотрите результат голосования в конце этой статьи.
Если в проекте используется десятки разных элементов с прозрачностью от основных цветов, и добавление всех таких цветов, приведёт к множеству не нужных переменных, а множество к
хорошему не приведет.
Спасибо за находчивость! У себя в проектах использую сокращение cl — для скорости. И в статье теперь тоже переименовал.
Далее, функция rgba это функция CSS, а не Sass, тем самым решения, которые я привёл выше, только лишь автоматизируют процесс контроля/управления цветами. На выходе это CSS.
Цель моего решения — иметь на входе HEX формат. А у вас в примере HSL формат цвета в переменной primary. Но, преобразовав HEX в HSL, и заменив в примерах rgba на hsl, вы так же сможете использовать приведенные выше методы для автоматизации сего процесса.
Статья строится на объединении 3х методах. И в самой статье я описываю каждый из. Данное описание относится к конкретному методу преобразования.
А в целом, статья нацелена на изменение CSS var имея на старте HEX формат.
Добавил описание задачи в начале статьи.
Это предложение написано от предосторожности комментариев: Зачем CSS переменные, есть же Sass??!!
И если вы посмотрите на код внимательно, то как раз вы увидите как я использую их совместно.
Нет необходимости использовать HSL формат в моих проектах, все цвета задаёт дизайнер в макете. Далее это верстается без изменений. Если вы хотите использовать HSL, а не rbg, то замените их в приведенных выше примерах, сути дело не меняет.
p.s большинство используют HEX формат и для многих эта статья будет актуальной. Смотрите результат голосования в конце этой статьи.
Если в проекте используется десятки разных элементов с прозрачностью от основных цветов, и добавление всех таких цветов, приведёт к множеству не нужных переменных, а множество к
хорошему не приведет.
Спасибо за находчивость! У себя в проектах использую сокращение cl — для скорости. И в статье теперь тоже переименовал.
Далее, функция rgba это функция CSS, а не Sass, тем самым решения, которые я привёл выше, только лишь автоматизируют процесс контроля/управления цветами. На выходе это CSS.
Цель моего решения — иметь на входе HEX формат. А у вас в примере HSL формат цвета в переменной
primary. Но, преобразовав HEX в HSL, и заменив в примерах rgba на hsl, вы так же сможете использовать приведенные выше методы для автоматизации сего процесса.Вы не поняли суть статьи, управлять необходимо CSS var.
Функция transparentize не умеет управлять CSS var.