Modifier l'opacité alpha de la variable LESS


171

En utilisant LESS, je sais que je peux changer la saturation ou la teinte d'une variable de couleur. Cela ressemble à ceci:

background: lighten(@blue, 20%);

Je veux cependant changer l'opacité alpha de ma couleur. De préférence comme ceci:

background: alpha(@blue, 20%);

Existe-t-il un moyen simple de le faire en MOINS?

Réponses:


303

La documentation du site donne la réponse:

background: fade(@blue, 20%);

Le nom de la fonction fadene alphacorrespond pas à ce document.


Merci! J'en ai assez de tout convertir en RGBA!
— BillyNair

Je cherchais l'assombrissement et l'éclaircissement .. Docs m'a amené là-bas. Merci

1
Je suis d'accord que «fondu» ne me semble pas exact. Sass le fait correctement: alpha (), opacity () et rgba ().
— Rich Finelli

2
Pour mémoire, fade()ne fonctionne pas avec les variables CSS - iefade(var(--mycolor), 20%)
— ed1nh0

26

Par souci d'exhaustivité

se faner

Définit la transparence absolue d'une couleur. Peut être appliqué aux couleurs, qu'elles aient déjà une valeur d'opacité ou non.

background: fade(@blue, 20%);

fondu

Diminue la transparence (ou augmente l'opacité) d'une couleur, la rendant plus opaque.

background: fadein(@blue, 80%);

disparaître

Augmentez la transparence (ou diminuez l'opacité) d'une couleur, la rendant moins opaque. Pour un fondu dans l'autre sens, utilisez le fondu.

background: fadeout(@blue, 20%);

Voir la documentation complète


1
Fadeout est exactement ce que je recherchais, merci!
— maxime1992
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.