Sass / Compass - перетворіть шістнадцятковий, RGB або названий колір у RGBA

86

Це може бути 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);

— Пет Ньюелл
джерело

179

Використовуйте 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);

— maxbeatty
джерело

4

Не можу повірити, що я не просто спробував це. Велике спасибі

— Пат Ньюелл

@jon, ти можеш детальніше розповісти, що бентежило мою відповідь, щоб я міг її покращити?

— maxbeatty

@maxbeatty, я не впевнений, що сталося з моїм коментарем, але мене спантеличило "==>" ... це здається очевидним з огляду на минуле, але коли ти відчуваєш себе загубленим, дуже важко визначити необхідний код із коментарів. Я думаю, це можна було б зробити більш чітким, включивши лише фактичний корисний код до блоків коду.

— Джон

@jon блок-цитата безпосередньо з документації Sass. Замість того, щоб просто посилатися на відповідну вбудовану функцію. Я вважав, що було б корисно включити відповідну документацію до відповіді. Вибачте, це заплутало.

— maxbeatty

о DUH. Арг. Завжди заглядайте У КОРОБКУ, перш ніж намагатись думати поза нею. Шиш!

— dudewad

8

Я використовую плагін 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);

— Ілля Чолий
джерело

вау ... чудово. Мене обдуває сила компаса. дякую за відповідь

— Pat Newell

7

Функція rgba не працює на кольорі без прозорості, вона знову повертає шістнадцяткову форму. Зрештою, це не призначено для перетворення hex в rgba, ми просто отримуємо прибуток з hex, не дозволяючи альфа-версію (поки що).

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

Отже, я зробив усі невеликі функції, які будують рядок rgb. Наразі мені не потрібно мати справу з прозорими плівками.

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

— Карлос Мартінес
джерело

2

Існує також ie-hex-str () для формату ## AARRGGBB IE:

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

— mikespainhower
джерело

2

from_hex(hex_string, alpha = nil);

З документації :

Створіть новий колір із дійсного шістнадцяткового рядка CSS. Провідний хеш необов’язковий.

— користувач776411
джерело