web-dev-qa-db-fra.com

Comment convertir une couleur HEX en rgba avec un compilateur Less?

J'ai le code suivant:

@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));

J'ai besoin de convertir @color en rgba(209, 72, 54, 1).

Je dois donc remplacer rgba(209, 72, 54, 1) dans mon code par la fonction Less qui génère la valeur rgba() à partir de ma variable @color.

Comment puis-je faire cela avec moins?

cssless
118
chubbyk

En fait, le langage LESS est livré avec une fonction intégrée appelée fade. Vous transmettez un objet de couleur et l'opacité absolue% (une valeur élevée signifie moins de transparence):

fade(@color, 50%);   // return @color with 50% opacity in rgba
327
Ronald Pauffert

Si vous n'avez pas besoin d'une clé alpha, vous pouvez simplement utiliser la représentation hexadécimale de la couleur. Une couleur rgba avec un alpha de '1' est identique à la valeur hexadécimale . Voici quelques exemples pour démontrer que:

@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;
}

Testez ce code en ligne: http://lesstester.com/

97
Sebastian Stiehl

Mon moins 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
    }
}

Essayez-le.

EDITED: Comme vu sur le fond rgba avec le filtre IE: IE9 rend les deux! J'ai ajouté quelques lignes au mixin.

12
helpse

Il semble qu'avec la récente mise à jour Less 3.81 , vous ne pouvez utiliser que deux arguments dans la fonction rgba ().

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

Cela fonctionne pour moi, mais je ne le trouve pas dans documentation officielle.

0
Dmitry Davydov