Sass / Compass – Convertir Hex, RVB ou couleur nommée en RGBA

Cela peut être Compass 101, mais quelqu’un a-t-il écrit un mixin qui définit la valeur alpha d’une couleur? Idéalement, je voudrais que le mixin prenne toute forme de définition de couleur et applique 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); 

Utilisez la fonction rgba 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)
(Number) alpha – Un nombre entre 0 et 1

Résultats:
(Couleur)

Code:

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

J’utilise le plugin rgbapng compass

rgbapng est un plugin Compass pour fournir un support RGBA compatible entre navigateurs *. Cela fonctionne en créant des PNG alpha-transparents à un seul pixel à la volée pour les navigateurs qui ne supportent pas le RGBA. Il utilise la bibliothèque Ruby ChunkyPNG pure pour une installation et un déploiement sans souci.

Installer

 gem install compass-rgbapng 

Usage

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

Comstack pour:

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

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 */ 
 from_hex(hex_ssortingng, alpha = nil); 

De la documentation :

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