IP Girl
  1. IP Girl
  3. Comment convertir la couleur HEX en rgba avec le compilateur Less?
Intereting Posts
Comment attendre un BackgroundWorker pour annuler? Scala: types abstraits vs génériques CSS: Comment étendre cette superposition à 100% avec le défilement? géolocalisation Android Webview Java: comment définir la précision pour une valeur double? ssortingng = ssortingng + int: Qu’est-ce qui se passe dans les coulisses? IIS Express – Mise en œuvre du protocole SSL “Statique const” vs “#define” vs “enum” Activation de c # 7 dans une application asp.net Fichier ouvert MacVim dans une fenêtre existante Comment fonctionnent les robots de jeu dans les jeux fps? Pourquoi lancer explicitement une NullPointerException plutôt que de laisser cela se produire naturellement? Créer un répertoire lors de l’écriture dans un fichier dans Node.js Requête SQL pour un retour chariot dans une chaîne et suppression finale du retour chariot Est-il valide d’avoir une balise dans une autre balise ?

Comment convertir la couleur HEX en rgba avec le compilateur Less?

J’ai le code suivant: 

@color : #d14836; .ssortingpes 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 en rgba(209, 72, 54, 1) .

J’ai donc besoin de remplacer rgba(209, 72, 54, 1) dans mon code avec la fonction Less qui génère la valeur rgba() partir de ma variable @color .

Comment puis-je le faire avec Less?

En fait, le langage LESS est livré avec une fonction intégrée appelée fade . Vous passez un object couleur et l’opacité absolue% (valeur supérieure signifie moins transparent): 

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

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/

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 on le voit sur l’ arrière-plan de rgba avec une alternative au filtre IE: IE9 rend les deux! J’ai ajouté quelques lignes au mixin.