Как избежать дублирования в CSS при добавлении прозрачности цвету?

Question

[imko]

Задача: задать базовый цвет, иногда задавать производный от него с изменением прозрачности. Чтобы использовать функцию rgb требуется значение неподходящее для использования в свойствах color/background и т.д.

:root {
	--mycolor-base: 0% 100% 0%;
	--mycolor-color: rgb(var(--mycolor-base));
}

.myClass {
	background-color: rgb(var(--mycolor-base) / 20%);
	color: var(--mycolor-color);
}

Возможно ли избежать создания переменной с "базой" цвета?
P.S. Этот пример просто пример, мне не требутеся решение конкретно для прозрачности фонового цвета, я ищу решение как в принципе избежать этой лишней переменной

Comments

[Виталий Першин]

А зачем вы вообще создаете --mycolor-color? Что вам мешает использовать --mycolor-base в других местах без прозрачности?

[imko]

Виталий Першин, много раз писать rgb функцию придется, проще же просто переменную сразу вставить

[Виталий Першин]

imko, Так не надо писать руками, создайте сниппет

[imko]

Виталий Першин, нууу как бы решение конечно, но сниппет это все таки помощь а не замена. Суть что я каким-либо образом пишу либо лишнюю переменную либо кучу вызовов ргб остается

[imko]

Виталий Першин, не нравится просто, непорядок какой-то ( ͡° ͜ʖ ͡°)

[Виталий Першин]

imko, Как по мне, непорядок, это кода вы в одном месте пишите одну переменную, а в другом другую, при этом у них одно назначение. А так у вас единый стиль, при этом гибкий.

[Виталий Першин]

Я для себя создаю переменные вот так

И использую как показал выше:

Но переменные rgb я не использую, они мне нужны для того чтобы я визуально понимал какой цвет, да это лишний код, но больше выигрываю, когда визуально определяю с какой переменной мне надо работать, они у меня всегда на виду в отдельном окне.

Answer 1

[IvanU7n]

никак, у себя иногда определяю только --mycolor: 10 20 30;
а потом везде использую whatever: rgb(var(--mycolor));