Sass / Compass - Konwertuj szesnastkowy, RGB lub nazwany kolor na RGBA

86

Może to być Compass 101, ale czy ktoś napisał mixin, który ustala wartość alfa koloru? Idealnie chciałbym, aby mixin przyjął dowolną formę definicji koloru i zastosował przezroczystość:

@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);
css sass compass-sass rgba Pat Newell
źródło

Odpowiedzi:

179

Użyj rgbafunkcji wbudowanej w Sass

Ustawia krycie koloru.

Przykłady:

rgba (# 102030, 0,5) => rgba (16, 32, 48, 0,5)
rgba (niebieski, 0,2) => rgba (0, 0, 255, 0,2)

Parametry:
(Color) color
(Number) alpha - Liczba od 0 do 1

Zwroty:
(kolor)

Kod:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
maxbeatty
źródło
4
Nie mogę uwierzyć, że tego nie spróbowałem. Wielkie dzięki
Pat Newell,
@jon czy możesz wyjaśnić, co było niejasne w mojej odpowiedzi, abym mógł ją poprawić?
maxbeatty
@maxbeatty Nie jestem pewien, co się stało z moim komentarzem, ale byłem zdezorientowany przez „==>”… z perspektywy czasu wydaje się to oczywiste, ale kiedy czujesz się zagubiony, naprawdę trudno jest odróżnić wymagany kod z komentarzy. Wydaje mi się, że można by to było jaśniej wyjaśnić, umieszczając tylko rzeczywisty użyteczny kod w blokach kodu.
Jon
@jon cytat pochodzi bezpośrednio z dokumentacji Sass. Zamiast po prostu łączyć się z odpowiednią wbudowaną funkcją. Pomyślałem, że pomocne byłoby dołączenie do odpowiedzi odpowiedniej dokumentacji. Przepraszamy, to było mylące.
maxbeatty
oh DUH. Arrg. Zawsze szukaj W PUDEŁKU, zanim spróbujesz wyjść poza to. Do licha!
dudewad
8

Używam wtyczki kompasu rgbapng

rgbapng to wtyczka Compass zapewniająca obsługę RGBA kompatybilną z różnymi przeglądarkami *. Działa poprzez tworzenie w locie plików PNG przezroczystych alfa z pojedynczym pikselem dla przeglądarek, które nie obsługują RGBA. Korzysta z czystej biblioteki Ruby ChunkyPNG, co zapewnia bezproblemową instalację i wdrażanie.

zainstalować

gem install compass-rgbapng

Stosowanie

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

Kompiluje do:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
Ilia Choly
źródło
whoa ... super. Jestem pod wrażeniem mocy kompasu. dzięki za odpowiedź
Pat Newell,
7

Funkcja rgba nie działa na kolorze bez przezroczystości, ponownie zwraca szesnastkowy. W końcu nie ma to na celu przekształcenia hexa w rgba, po prostu zarabiamy na hexie (jeszcze).

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

Więc stworzyłem wszystkie małe funkcje, które budują łańcuch rgb. Na razie nie muszę zajmować się foliami.

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
Carlos Martínez
źródło
2

Istnieje również ie-hex-str () dla formatu ## AARRGGBB przeglądarki IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */
mikespainhower
źródło
2 
from_hex(hex_string, alpha = nil);

Z dokumentacji :

Utwórz nowy kolor z prawidłowego ciągu szesnastkowego CSS. Wiodący skrót jest opcjonalny.

user776411
źródło