web-dev-qa-db-de.com

Wie konvertiert man HEX-Farbe mit Less-Compiler in rgba?

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 @color in rgba(209, 72, 54, 1) konvertieren.

Daher muss ich rgba(209, 72, 54, 1) in meinem Code durch die Less-Funktion ersetzen, die rgba()-Wert aus meiner @color-Variablen generiert.

Wie mache ich das mit weniger?

cssless
118
chubbyk

Tatsächlich enthält die LESS-Sprache 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
327
Ronald Pauffert

Wenn Sie keinen Alpha-Schlüssel benötigen, können Sie einfach die Hex-Darstellung der Farbe verwenden. Eine rgba-Farbe mit einem Alpha von '1' entspricht dem Hex-Wert .. Hier sind einige Beispiele, die Folgendes 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/

97
Sebastian Stiehl

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 IE8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // IE9 and down
    // Problem: Filter gets applied twice in IE9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

Versuch es.

EDITED: Wie auf rgba-Hintergrund mit IE Filteralternative zu sehen: IE9 rendert beide! Ich habe dem Mixin einige Zeilen hinzugefügt.

12
helpse

Es scheint, dass Sie mit dem letzten Less-Update 3.81 nur zwei Argumente in der Funktion rgba () verwenden können.

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.

0
Dmitry Davydov