Sass / Compass: convierte Hex, RGB o Color con nombre a RGBA

86

Esto puede ser Compass 101, pero ¿alguien ha escrito una combinación que establezca el valor alfa de un color? Idealmente, me gustaría que el mixin tomara cualquier forma de definición de color y aplicara transparencia:

@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
fuente

Respuestas:

179

Utilice la rgbafunción integrada en Sass

Establece la opacidad de un color.

Ejemplos:

rgba (# 102030, 0.5) => rgba (16, 32, 48, 0.5)
rgba (azul, 0.2) => rgba (0, 0, 255, 0.2)

Parámetros:
(Color) color
(Number) alpha - Un número entre 0 y 1

Devoluciones:
(Color)

Código:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
maxbeatty
fuente
4
No puedo creer que no lo haya intentado. Muchas gracias max
Pat Newell
@jon, ¿puedes explicar qué fue lo confuso de mi respuesta para que pueda mejorarla?
maxbeatty
@maxbeatty No estoy seguro de qué pasó con mi comentario, pero estaba confundido por el "==>" ... parece obvio en retrospectiva, pero cuando te sientes perdido es realmente difícil distinguir el código requerido de los comentarios. Supongo que podría aclararse más si solo incluye el código utilizable real en los bloques de código.
Jon
@jon the blockquote es directamente de la documentación de Sass. En lugar de simplemente vincularse a la función incorporada relevante. Pensé que sería útil incluir la documentación relacionada en la respuesta. Lo siento, esto fue confuso.
maxbeatty
oh DUH. Arrg. Mire siempre EN LA CAJA antes de intentar pensar fuera de ella. ¡Sheesh!
dudewad
8

Yo uso el complemento rgbapng compass

rgbapng es un complemento de Compass para proporcionar compatibilidad con RGBA compatible con varios navegadores *. Funciona creando archivos PNG transparentes alfa de un solo píxel sobre la marcha para navegadores que no admiten RGBA. Utiliza la biblioteca Ruby ChunkyPNG pura, lo que resulta en una instalación e implementación sin problemas.

Instalar en pc

gem install compass-rgbapng

Uso

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

Compila para:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
Ilia Choly
fuente
whoa ... impresionante. Estoy asombrado por el poder de la brújula. gracias por la respuesta
Pat Newell
7

La función rgba no funciona con colores sin transparencia, devuelve un hexadecimal de nuevo. Después de todo, no está destinado a transformar hexadecimal en rgba, solo estamos obteniendo beneficios de hex no permite alfa (todavía).

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

Entonces, hice algunas funciones que construyen la cadena rgb. No necesito ocuparme de las transparencias por ahora.

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
Carlos Martínez
fuente
2

También hay ie-hex-str () para el formato ## AARRGGBB de IE:

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

De la documentación :

Cree un nuevo color a partir de una cadena hexadecimal CSS válida. El hash inicial es opcional.

usuario776411
fuente