Как преобразовать шестнадцатеричный цвет в rgba с помощью компилятора Less?

131

У меня такой код:

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

Мне нужно преобразовать @colorв rgba(209, 72, 54, 1).

Поэтому мне нужно заменить rgba(209, 72, 54, 1)в моем коде функцию Less, которая генерирует rgba()значение из моей @colorпеременной.

Как я могу сделать это с помощью Less?

css less chubbyk
источник
3
Функции fadein / fadeout / fade не делают то, что вам нужно? lesscss.org/#reference
cimmanon

Ответы:

348

На самом деле язык Less поставляется со встроенной функцией, называемой fade. Вы передаете объект цвета и абсолютную непрозрачность% (более высокое значение означает менее прозрачную):

fade(@color, 50%);   // Return @color with 50% opacity in rgba
Рональд Пафферт
источник
42
@Soc ответил на вопрос ОП, но вы дали нам ответ ВСЕ ЕЩЕ пришли сюда, чтобы найти! Спасибо!
BillyNair 05
1
Я думаю, что параметр количества - это не уровень прозрачности, а наоборот, обозначает уровень непрозрачности?
mousio
2
@mousio На самом деле, при точном выборе получается 50%и прозрачность, и непрозрачность. :)
Дем Пилафян
1
@mousio Если вы хотите углубиться в технические детали, я считаю, что это более точно пропорция «полупрозрачного» цвета, которая будет смешиваться с цветом каждого пикселя, на который накладывается элемент - см. en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) Но в практическом плане конечно вы правы; процентное или десятичное значение представляет уровень непрозрачности, а не уровень прозрачности!
Брайан Лейси
5
На заметку, это недостаток API. Мне приходится искать его каждый раз, когда я хочу его использовать. Было бы разумно с их стороны превратить существующий RGBA в вызов LESS, как это делает SASS - rgba (@colorValue, .5), чтобы он выводил точно такой же хинг, как фактическое объявление CSS rgba. Но эй, это я хнычу. :)
dudewad
105

Если вам не нужен альфа-ключ, вы можете просто использовать шестнадцатеричное представление цвета. Цвет rgba с альфа-каналом, равным 1, совпадает с шестнадцатеричным значением.

Вот несколько примеров, демонстрирующих это:

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

Протестируйте этот код в Интернете: http://lesstester.com/

Себастьян Штиль
источник
Как насчет этой ошибки? error evaluating function 'red': Cannot read property '0' of undefined
Aldi Unanto
Это не обновлялось какое-то время, но с Less PHP я получаю следующую ошибку - @colorGold: color('#C6AF87'); .box { background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); } Ошибка - Не удалось скомпилировать файл CSS (screen.less): цвет, ожидаемый для red (): не удалось на `background-color: rgba ( красный (@colorGold), зеленый (@colorGold), голубой (@colorGold), 0.3);
Крис
1
@Chris, вы можете назначить цвет напрямую, чтобы эта работа работала с Less PHP, похоже, также работает с текущей версией less, поэтому я адаптировал пример. @colorGold: #C6AF87;
Себастьян Штиль
@Soc это было мое возможное решение, и я нашел его вскоре после того, как не знаю, что произвело у меня впечатление, что мне нужно было обернуть его цветными тегами!
Крис
Посмотрите мою функцию less, stackoverflow.com/questions/14860874/…
helpse
12

My Less mixin:

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

Попытайся.

EDITED: как видно на фоне rgba с альтернативой фильтра IE: IE9 отображает оба! , Я добавил несколько строк в миксин.

helpse
источник
2

Похоже, что с недавним обновлением Less 3.81 вы можете использовать только два аргумента в функции rgba ().

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

У меня это работает, но я не могу найти его в официальной документации .

Дмитрий Давыдов
источник