Sass / Compass - Converta Hex, RGB ou Cor Nomeada em RGBA

86

Pode ser o Compass 101, mas alguém escreveu um mixin que define o valor alfa de uma cor? Idealmente, eu gostaria que o mixin tomasse qualquer forma de definição de cor e aplicasse transparência:

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

Respostas:

179

Use a rgbafunção incorporada ao Sass

Define a opacidade de uma cor.

Exemplos:

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

Parâmetros:
(Cor) cor
(Número) alfa - Um número entre 0 e 1

Retorna:
(cor)

Código:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
maxbeatty
fonte
4
não acredito que não tentei fazer isso. Muito obrigado max
Pat Newell
@jon você pode explicar o que estava confuso em minha resposta para que eu possa melhorá-la?
maxbeatty de
@maxbeatty não tenho certeza do que aconteceu com o meu comentário, mas fiquei confuso com o "==>" ... parece óbvio em retrospectiva, mas quando você está se sentindo perdido, é realmente difícil distinguir o código necessário dos comentários. acho que poderia ficar mais claro incluindo apenas o código real utilizável nos blocos de código.
jon
@jon o blockquote vem diretamente da documentação do Sass. Em vez de apenas vincular à função incorporada relevante. Achei que seria útil incluir a documentação relacionada na resposta. Desculpe, isso foi confuso.
maxbeatty
oh DUH. Arrg. Sempre olhe DENTRO DA CAIXA antes de tentar pensar fora dela. Nossa!
dudewad
8

Eu uso o plugin rgbapng compass

rgbapng é um plugin do Compass para fornecer suporte RGBA compatível com cross-browser *. Ele funciona criando PNGs transparentes alfa de pixel único rapidamente para navegadores que não oferecem suporte a RGBA. Ele usa a biblioteca Ruby ChunkyPNG pura, resultando em uma instalação e implantação descomplicadas.

Instalar

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
fonte
uau ... incrível. Estou encantado com o poder da bússola. obrigado pela resposta
Pat Newell
7

A função rgba não funciona em cores sem transparência, ela retorna um hex novamente. Afinal, não se trata de transformar hex em rgba, estamos apenas lucrando com hex que não permite alfa (ainda).

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

Então, eu fiz todas as pequenas funções que compõem a string rgb. Não preciso lidar com transparências por enquanto.

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

Há também ie-hex-str () para o formato ## AARRGGBB do 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);

Da documentação :

Crie uma nova cor a partir de uma string hexadecimal CSS válida. O hash inicial é opcional.

user776411
fonte