Comment convertir une couleur hexadécimale en rgba avec le compilateur Less?

131

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

Je dois convertir @colorà rgba(209, 72, 54, 1).

J'ai donc besoin de remplacer rgba(209, 72, 54, 1)dans mon code par une fonction Less qui génère une rgba()valeur à partir de ma @colorvariable.

Comment puis-je faire cela avec Less?

css less joufflu
la source
3
Les fonctions fadein / fadeout / fade ne font pas ce dont vous avez besoin? lesscss.org/#reference
cimmanon

Réponses:

348

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

fade(@color, 50%);   // Return @color with 50% opacity in rgba
Ronald Pauffert
la source
42
@Soc a répondu à la question du PO, mais vous nous avez donné la réponse TOUT LE MONDE est venu ici pour la trouver! Je vous remercie!
BillyNair
1
Je pense que le paramètre de quantité n'est pas le niveau de transparence mais au contraire désigne le niveau d'opacité?
mousio
2
@mousio En fait, en choisissant exactement 50%, c'est correctement à la fois la transparence et l'opacité. :)
Dem Pilafian
1
@mousio Si vous voulez être vraiment technique, je pense que c'est plus précisément la proportion de la couleur "translucide" à mélanger avec la couleur de chaque pixel que l'élément superpose - voir en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) Mais en termes pratiques, bien sûr vous avez raison; le pourcentage ou la valeur décimale représente le niveau d'opacité, pas le niveau de transparence!
Brian Lacy
5
Pour mémoire, il s'agit d'une faille dans l'API. Je dois le chercher à chaque fois que je veux l'utiliser. Il serait sage de leur part de transformer le RGBA existant en un appel LESS comme le fait SASS - rgba (@colorValue, .5) de sorte qu'il produise exactement le même hing qu'une déclaration CSS rgba réelle. Mais bon, c'est moi pleurnichant. :)
dudewad
105

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 la même que 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/

Sebastian Stiehl
la source
Et cette erreur que j'ai eue? error evaluating function 'red': Cannot read property '0' of undefined
Aldi Unanto
Cela n'a pas été mis à jour depuis un moment, mais avec moins de PHP, j'obtiens l'erreur suivante - L' @colorGold: color('#C6AF87'); .box { background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); } erreur est - Impossible de compiler le fichier CSS (screen.less): couleur attendue pour le rouge (): échoué à `background-color: rgba ( rouge (@colorGold), vert (@colorGold), bleu (@colorGold), 0,3);
Chris
1
@Chris vous pouvez attribuer la couleur directement pour que cela fonctionne avec Less PHP, il semble également fonctionner avec la version less actuelle, j'ai donc adapté l'exemple. @colorGold: #C6AF87;
Sebastian Stiehl
@Soc c'était ma solution finale et je l'ai trouvée peu de temps après, je ne sais pas ce qui m'a donné l'impression que j'avais besoin de l'envelopper dans des étiquettes de couleur!
Chris
Découvrez ma fonction less, stackoverflow.com/questions/14860874/…
helpse
12

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

Essayez-le.

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

aider
la source
2

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 la documentation officielle .

Dmitry Davydov
la source