Sass / Compass - конвертировать шестнадцатеричный, RGB или именованный цвет в RGBA

Question

Это может быть Compass 101, но кто-нибудь написал миксин, который устанавливает альфа-значение цвета?В идеале я хотел бы, чтобы миксин принимал любую форму определения цвета и применял прозрачность:

@include set-alpha( red, 0.5 );          //prints rgba(255, 0, 0, 0.5);
@include set-alpha( #ff0000, 0.5 );      //prints rgba(255, 0, 0, 0.5);
@include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);

Answer 1

Используйте функцию rgba, встроенную в Sass

Устанавливает непрозрачность цвета.

Примеры:

rgba (# 102030, 0.5) => rgba (16, 32, 48, 0.5)
rgba (синий, 0.2) => rgba (0, 0, 255, 0.2)

Параметры:
(Цвет) цвет
(Число) альфа - число от 0 до 1

Возвращает:
(Цвет)

Код:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);

Answer 2

Я использую плагин rgbapng compass

rgbapng - это плагин Compass для обеспечения кросс-браузерной * RGBA-совместимой поддержки.Он работает путем создания однопиксельных альфа-прозрачных PNG на лету для браузеров, которые не поддерживают RGBA.Он использует чистую библиотеку Ruby ChunkyPNG, что обеспечивает беспроблемную установку и развертывание.

Установка

gem install compass-rgbapng

Использование

@include rgba-background(rgba(0,0,0,0.75));

Компилируется в:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

Answer 3

Функция rgba не работает с цветом без прозрачности, она снова возвращает гекс.В конце концов, он не предназначен для преобразования гекса в rgba, мы просто получаем прибыль из гекса, не позволяя альфа (пока).

rgba(#fff, 1) // returns #fff

Итак, я сделал несколько маленьких функций, которые строят rgbстрока.Сейчас мне не нужно заниматься прозрачными пленками.

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

Answer 4

from_hex(hex_string, alpha = nil);

Из документации :

Создать новый цвет из допустимой шестнадцатеричной строки CSS.Ведущий хеш необязателен.

Answer 5

Существует также ie-hex-str () для IE в формате ## AARRGGBB:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */