Wie konvertiere ich eine hexadezimale Farbe mit dem Less-Compiler in rgba?

131

Ich habe folgenden Code:

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

Ich muss konvertieren @colorzu rgba(209, 72, 54, 1).

Daher muss ich rgba(209, 72, 54, 1)meinen Code durch eine Less-Funktion ersetzen , die rgba()aus meiner @colorVariablen einen Wert generiert .

Wie kann ich das mit weniger machen?

css less mollig
quelle
3
Tun die Funktionen Fadein / Fadeout / Fade nicht das, was Sie brauchen? lesscss.org/#reference
Cimmanon

Antworten:

348

Tatsächlich enthält die Sprache Less eine eingebettete Funktion namens fade. Sie übergeben ein Farbobjekt und die absolute Deckkraft% (höherer Wert bedeutet weniger transparent):

fade(@color, 50%);   // Return @color with 50% opacity in rgba
Ronald Pauffert
quelle
42
@Soc beantwortete die Frage des OP, aber Sie gaben uns die Antwort, die JEDER ANDERE hierher kam, um zu finden! Danke dir!
BillyNair
1
Ich denke, der Betragsparameter ist nicht die Transparenzstufe, sondern bezeichnet im Gegenteil die Deckkraftstufe?
Maus
2
@mousio Wenn Sie genau auswählen, 50%ist dies sowohl Transparenz als auch Deckkraft korrekt. :)
Dem Pilafian
1
@mousio Wenn Sie wirklich technisch werden möchten, ist es meiner Meinung nach genauer, dass der Anteil der "durchscheinenden" Farbe mit der Farbe jedes Pixels, das das Element überlagert, gemischt wird - siehe en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) Aber in der Praxis haben Sie natürlich Recht; Der Prozent- oder Dezimalwert repräsentiert die Deckkraftstufe, nicht die Transparenzstufe!
Brian Lacy
5
Für die Aufzeichnung ist dies ein Fehler in der API. Ich muss es jedes Mal nachschlagen, wenn ich es verwenden möchte. Es wäre ratsam, die vorhandene RGBA in einen WENIGEREN Aufruf wie SASS - rgba (@colorValue, .5) zu verwandeln, so dass genau das gleiche Scharnier wie bei einer tatsächlichen CSS-rgba-Deklaration ausgegeben wird. Aber hey, ich bin weinerlich. :)
Dudewad
105

Wenn Sie keinen Alpha-Schlüssel benötigen, können Sie einfach die hexadezimale Darstellung der Farbe verwenden. Eine RGBA-Farbe mit einem Alpha von '1' entspricht dem Hexadezimalwert.

Hier einige Beispiele, um dies zu demonstrieren:

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

Testen Sie diesen Code online: http://lesstester.com/

Sebastian Stiehl
quelle
Wie wäre es mit diesem Fehler, den ich bekommen habe? error evaluating function 'red': Cannot read property '0' of undefined
Aldi Unanto
Dies wurde für eine Weile nicht aktualisiert, aber mit weniger PHP @colorGold: color('#C6AF87'); .box { background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); } erhalte ich den folgenden Fehler - Fehler ist - CSS-Datei konnte nicht kompiliert werden (screen.less): Farbe für Rot erwartet (): fehlgeschlagen bei `Hintergrundfarbe: rgba ( rot (@colorGold), grün (@colorGold), blau (@colorGold), 0,3);
Chris
1
@ Chris Sie können die Farbe direkt zuweisen, damit dies mit weniger PHP funktioniert. Es scheint auch mit der aktuellen Version mit weniger zu funktionieren, also habe ich das Beispiel angepasst. @colorGold: #C6AF87;
Sebastian Stiehl
@Soc dies war meine mögliche Lösung und ich fand sie kurz nachdem ich nicht wusste, was mir den Eindruck gab, dass ich sie in Farbetiketten einwickeln musste!
Chris
Überprüfen Sie heraus meine weniger Funktion, stackoverflow.com/questions/14860874/…
helpse
12

Mein weniger Mixin:

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

Versuch es.

BEARBEITET: Wie auf dem RGBA-Hintergrund mit IE-Filter-Alternative zu sehen: IE9 rendert beide! Ich habe dem Mixin einige Zeilen hinzugefügt.

Hilfe
quelle
2

Es scheint , dass mit dem jüngsten Weniger Update 3.81 , können Sie nur zwei Argumente in der rgba () Funktion verwenden.

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

Es funktioniert für mich, aber ich kann es nicht in der offiziellen Dokumentation finden .

Dmitry Davydov
quelle