Препроцессор LESS CSS: есть ли способ сопоставить один цвет определению rgb и rgba?

Question

Я пытаюсь написать блок в препроцессоре CSS LESS, который будет делать следующее:

@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);
}

Answer 1

Попробуйте это:

background: @color - rgba(0, 0, 0, 1.0) + rgba(0, 0, 0, @alpha);

Вычитание очистит альфа-канал на @color, затем вы просто добавите желаемый @alpha к альфа-каналу. Цвета имеют полный набор операторов, и они работают компонент за компонентом при работе с двумя цветами; цвета хранятся как компоненты RGBA внутри, так что это должно работать. Кроме того, альфа-канал нормализован, чтобы быть в интервале [0, 1.0], поэтому вычитание 1,0 из альфа-канала должно очистить его без каких-либо проблем.

У меня сейчас нет CSS LESS, поэтому я не могу проверить, но это стоит попробовать.

Answer 2

Я знаю, что это старый вопрос, но если все, что вам нужно, это добавить альфа-значение, просто используйте fade(@color, @alpha).Цвет может быть в hex, rgba или hsla.

Answer 3

Обратите внимание, что вы также можете использовать функции затухания / затухания LESS:

.alpha(@color, @alpha: 80)
{
    background-color: fadeout(@color, (100 - @alpha));
}

Таким образом, .alpha (красный, 25) приведет к цвету фона: rgba (255, 0, 0, 0,25)

Answer 4

Ни одно из решений больше не работает, но это работает (благодаря @ Elyse ):

.alpha(@color, @alpha: 0.8) {
    color: @color;
    color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

Функция hsla(), хотя и не рекламируется на веб-сайте LESS,определяется в исходном коде .