Sass / Compass - Converti esadecimale, RGB o colore con nome in RGBA

86

Potrebbe essere Compass 101, ma qualcuno ha scritto un mixin che imposta il valore alfa di un colore? Idealmente, vorrei che il mixin prendesse qualsiasi forma di definizione del colore e applicasse la trasparenza:

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

— Pat Newell
fonte

180

Usa la rgbafunzione incorporata in Sass

Imposta l'opacità di un colore.

Esempi:

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

Parametri:
(Color) color
(Number) alpha - Un numero compreso tra 0 e 1

Resi:
(Colore)

Codice:

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

— maxbeatty
fonte

4

non posso credere di non averlo provato. Grazie mille max

— Pat Newell

@jon puoi approfondire cosa era confuso nella mia risposta in modo che io possa migliorarla?

— maxbeatty

@maxbeatty non sono sicuro di cosa sia successo al mio commento, ma ero confuso dal "==>" ... sembra ovvio col senno di poi, ma quando ti senti perso è davvero difficile distinguere il codice richiesto dai commenti. Immagino che potrebbe essere reso più chiaro includendo solo il codice effettivamente utilizzabile nei blocchi di codice.

— jon

@jon il blockquote è direttamente dalla documentazione di Sass. Invece di collegarsi semplicemente alla relativa funzione incorporata. Ho pensato che sarebbe stato utile includere la relativa documentazione nella risposta. Mi dispiace, questo è stato fonte di confusione.

— maxbeatty

oh DUH. Arrg. Guarda sempre NELLA SCATOLA prima di provare a pensare al di fuori di essa. Sheesh!

— dudewad

8

Uso il plug-in della bussola rgbapng

rgbapng è un plug-in Compass per fornire supporto RGBA compatibile cross-browser *. Funziona creando al volo PNG a pixel singolo trasparente alfa per i browser che non supportano RGBA. Utilizza la pura libreria Ruby ChunkyPNG con conseguente installazione e distribuzione senza problemi.

Installare

gem install compass-rgbapng

Utilizzo

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

Si compila per:

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

— Ilia Choly
fonte

whoa ... fantastico. Sono spazzato via dal potere della bussola. grazie per la risposta

— Pat Newell

7

La funzione rgba non funziona sul colore senza trasparenza, restituisce di nuovo un esadecimale. Dopotutto, non ha lo scopo di trasformare hex in rgba, stiamo solo facendo profitto da hex non consente alpha (ancora).

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

Quindi, ho creato alcune piccole funzioni che compilano la stringa rgb. Non ho bisogno di occuparmi dei lucidi per ora.

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

— Carlos Martínez
fonte

2

C'è anche ie-hex-str () per il formato ## AARRGGBB di IE:

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

— mikespainhower
fonte

2

from_hex(hex_string, alpha = nil);

Dalla documentazione :

Crea un nuovo colore da una stringa esadecimale CSS valida. L'hash principale è facoltativo.

— user776411
fonte