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 @color
variable.
Comment puis-je faire cela avec Less?
Réponses:
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):la source
50%
, c'est correctement à la fois la transparence et l'opacité. :)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:
Testez ce code en ligne: http://lesstester.com/
la source
error evaluating function 'red': Cannot read property '0' of undefined
@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);@colorGold: #C6AF87;
Mon moins mixin:
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.
la source
Il semble qu'avec la récente mise à jour Less 3.81 , vous ne pouvez utiliser que deux arguments dans la fonction rgba ().
Cela fonctionne pour moi, mais je ne le trouve pas dans la documentation officielle .
la source