Sass / Compass - Conversion hexadécimale, RVB ou couleur nommée en RVBA

86

C'est peut-être Compass 101, mais quelqu'un a-t-il écrit un mixin définissant la valeur alpha d'une couleur? Idéalement, je voudrais que le mixin prenne n'importe quelle forme de définition de couleur et applique de la transparence:

@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
la source

Réponses:

179

Utilisez la rgbafonction intégrée à Sass

Définit l'opacité d'une couleur.

Exemples:

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

Paramètres:
(Couleur) couleur
(Nombre) alpha - Un nombre entre 0 et 1

Renvoie:
(Couleur)

Code:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
maxbeatty
la source
4
Je ne peux pas croire que je n'ai pas juste essayé ça. Merci beaucoup max
Pat Newell
@jon pouvez-vous expliquer ce qui était déroutant dans ma réponse pour que je puisse l'améliorer?
maxbeatty
@maxbeatty Je ne suis pas sûr de ce qui est arrivé à mon commentaire mais j'ai été confus par le "==>" ... cela semble évident avec le recul, mais quand vous vous sentez perdu, il est vraiment difficile de distinguer le code requis des commentaires. Je suppose que cela pourrait être rendu plus clair en n'incluant que le code utilisable réel dans les blocs de code.
jon
@jon le blockquote provient directement de la documentation Sass. Au lieu de simplement créer un lien vers la fonction intégrée appropriée. J'ai pensé qu'il serait utile d'inclure la documentation connexe dans la réponse. Désolé, c'était déroutant.
maxbeatty
oh DUH. Arrg. Regardez toujours DANS LA BOÎTE avant d'essayer de penser en dehors. Sheesh!
dudewad
8

J'utilise le plugin rgbapng compass

rgbapng est un plugin Compass pour fournir un support RGBA compatible avec tous les navigateurs *. Il fonctionne en créant des PNG transparents alpha à pixel unique à la volée pour les navigateurs qui ne prennent pas en charge RGBA. Il utilise la bibliothèque pure Ruby ChunkyPNG, ce qui permet une installation et un déploiement sans tracas.

Installer

gem install compass-rgbapng

Usage

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

Compile vers:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
Ilia Choly
la source
whoa ... génial. Je suis époustouflé par la puissance de la boussole. merci pour la réponse
Pat Newell
7

La fonction rgba ne fonctionne pas sur la couleur sans transparence, elle renvoie à nouveau un hex. Après tout, ce n'est pas destiné à transformer hex en rgba, nous faisons juste des profits avec hex n'autorise pas (encore) l'alpha.

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

Donc, j'ai créé toutes les petites fonctions qui construisent la chaîne rgb. Je n'ai pas besoin de m'occuper des transparents pour l'instant.

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

Il y a aussi ie-hex-str () pour le format ## AARRGGBB d'IE:

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

De la documentation :

Créez une nouvelle couleur à partir d'une chaîne hexadécimale CSS valide. Le hachage principal est facultatif.

utilisateur776411
la source