Меньше препроцессора CSS: есть ли способ отобразить один цвет с определением RGB и RGBA?
-
10-10-2019 - |
Вопрос
Я пытаюсь написать блок в препроцессоре CSS меньше, который сделает следующее:
@transparent_background(@color; @alpha: .8)
{
background: @color;
background: rgba(<color R value>, <color G value>, <color B value>, @alpha);
}
Есть ли способ вытащить значения RGB из @Color, если это стандартное определение шестнадцатеристи (т.е. #RRGGBB)? Есть ли способ сделать это, если @color определяется другим способом?
РЕДАКТИРОВАТЬ: Решение
@transparent_background(@color; @alpha: .8)
{
background: @color;
background: @color + rgba(0, 0, 0, @alpha);
}
Решение
Ни одно из решений больше не работает, но это делает (благодаря @Elyse):
.alpha(@color, @alpha: 0.8) {
color: @color;
color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
А hsla()
Функция, хотя и не рекламируется на веб -сайте, определяется в исходном коде.
Другие советы
Попробуй это:
background: @color - rgba(0, 0, 0, 1.0) + rgba(0, 0, 0, @alpha);
Вычитание очистит альфа -канал на @color
Тогда вы просто добавляете желаемый @alpha
к альфа -каналу. Цветы имеют полный набор операторов, и они работают компонентом по компоненту при работе на двух цветах; Цвета хранятся как компоненты RGBA внутри, так что это должно работать. Кроме того, альфа -канал нормализован, чтобы быть в интервале [0, 1.0]
Таким образом, вычитание 1.0 из альфа -канала должно очистить его, не вызывая никаких проблем.
У меня сейчас нет CSS, поэтому я не могу проверить, но это стоит попробовать.
Обратите внимание, что вы также можете продолжить функции Fadein/Fadeout меньше:
.alpha(@color, @alpha: 80)
{
background-color: fadeout(@color, (100 - @alpha));
}
Таким образом, .alpha (красный, 25) приведет к фоновому цвету RGBA (255, 0, 0, 0,25)
Я знаю, что это старый вопрос, но если все, что вы хотите сделать, это добавить альфа -значение. fade(@color, @alpha)
. Анкет Цвет может быть в HEX, RGBA или HSLA.