Sass / Compass - Konvertiert Hex, RGB oder Named Color in RGBA

84

Dies mag Compass 101 sein, aber hat jemand ein Mixin geschrieben, das den Alpha-Wert einer Farbe festlegt? Idealerweise möchte ich, dass das Mixin jede Form der Farbdefinition annimmt und Transparenz anwendet:

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

Antworten:

177

Verwenden Sie die rgbain Sass integrierte Funktion

Legt die Deckkraft einer Farbe fest.

Beispiele:

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

Parameter:
(Farbe) Farbe
(Zahl) Alpha - Eine Zahl zwischen 0 und 1

Rückgabe:
(Farbe)

Code:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
maxbeatty
quelle
4
Ich kann nicht glauben, dass ich das nicht einfach versucht habe. Vielen Dank max
Pat Newell
@jon kannst du näher erläutern, was an meiner Antwort verwirrend war, damit ich sie verbessern kann?
Maxbeatty
@maxbeatty Ich bin mir nicht sicher, was mit meinem Kommentar passiert ist, aber ich war durch das "==>" verwirrt ... es scheint im Nachhinein offensichtlich, aber wenn Sie sich verloren fühlen, ist es wirklich schwierig, den erforderlichen Code aus den Kommentaren zu unterscheiden. Ich denke, es könnte klarer gemacht werden, indem nur tatsächlich verwendbarer Code in die Codeblöcke aufgenommen wird.
Jon
@jon Das Blockzitat stammt direkt aus der Sass-Dokumentation. Anstatt nur auf die entsprechende integrierte Funktion zu verlinken. Ich dachte, es wäre hilfreich, die zugehörige Dokumentation in die Antwort aufzunehmen. Entschuldigung, das war verwirrend.
Maxbeatty
oh DUH. Arrg. Schauen Sie immer in die Schachtel, bevor Sie versuchen, außerhalb davon zu denken. Meine Güte!
Dudewad
8

Ich benutze das rgbapng Kompass Plugin

rgbapng ist ein Compass-Plugin für die browserübergreifende * RGBA-Unterstützung. Für Browser, die RGBA nicht unterstützen, werden im Handumdrehen Alpha-transparente PNGs mit einem Pixel erstellt. Es verwendet die reine Ruby ChunkyPNG-Bibliothek, was eine problemlose Installation und Bereitstellung ermöglicht.

Installieren

gem install compass-rgbapng

Verwendung

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

Kompiliert zu:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
Ilia Choly
quelle
whoa ... großartig. Ich bin überwältigt von der Kraft des Kompasses. Vielen Dank für die Antwort
Pat Newell
6

Die rgba-Funktion funktioniert nicht bei Farben ohne Transparenz, sondern gibt erneut ein Hex zurück. Schließlich ist es nicht dazu gedacht, Hex in RGBA umzuwandeln, wir machen nur Gewinn aus Hex, das Alpha (noch) nicht zulässt.

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

Also habe ich alle kleinen Funktionen erstellt, die den RGB-String erstellen. Ich muss mich vorerst nicht mit Transparenzen befassen.

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

Es gibt auch ie-hex-str () für das ## AARRGGBB-Format des IE:

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

Aus der Dokumentation :

Erstellen Sie eine neue Farbe aus einer gültigen CSS-Hex-Zeichenfolge. Der führende Hash ist optional.

user776411
quelle