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

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

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

Ответ 1

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

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

Примеры:

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

Параметры:
(Цветной) цвет
(Number) alpha - Число от 0 до 1

Returns:
(Цвет)

код:

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

Ответ 2

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

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

Ответ 3

Также есть-hex-str() для формата IE ## AARRGGBB:

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

Ответ 4

from_hex(hex_string, alpha = nil);

Из documentation:

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