Découvrir LESS

Renvoyer une donnée à partir d'un mixin

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous apprendrez à utiliser la portée des variables LESS. Ainsi, une classe mixin pourra retourner des données.

Transcription

Si vous êtes développeur dans un autre langage tels que le JavaScript ou le PHP, vous aurez très certainement fait la comparaison entre une mixin less et une fonction en PHP ou en JavaScript par exemple. Cela dit, il y a une fonctionnalité très importante de ces fonctions que les mixins less n'ont pas, c'est la possibilité de renvoyer un résultat. En clair, on n'a pas en less la possibilité de faire un return comme on le fait en JavaScript ou en PHP. Cela dit, vous allez voir dans cette vidéo qu'il y a quand même une astuce qui va nous permettre d'avoir un comportement plus ou moins similaire en less. Alors je vais utiliser pour vous illustrer tout cela, la même page HTML, j'ai juste fait un changement, vous allez voir que j'ai utilisé ici une photo dans le fond de la page plutôt qu'une couleur. Et comme c'est une jolie photo de la grande palace de Bruxelles, eh bien, j'aimerais que l'en-tête de mon site n'utilise pas une couleur rouge pleine et opaque comme j'ai maintenant, mais une couleur rouge avec une petite transparence pour laisser passer donc, cette jolie photo de la grande palace de Bruxelles à travers le header. Alors je vais pour ça créer une mixin qui va me permettre de convertir des couleurs exprimées en hexadécimal en une couleur en RGBA, donc avec une opacité. Partons d'abord si vous le voulez bien à la découverte des ingrédients dont on va avoir besoin pour réaliser cette opération. Donc pour ça, je me rends sur le site lesscss.org, je vais aller voir les fonctions qui existent et parmi toutes les fonctions qu'on me propose, eh bien, j'ai des Color Channel Functions, donc des fonctions qui vont me permettre d'agir sur les canaux présents dans un objet couleur. Alors parmi toutes les fonctions possibles, eh bien, j'ai une fonction qui s'appelle red, qui va me permettre d'extraire le canal rouge d'une couleur, et puis j'ai la même chose avec la fonction green, qui va me permettre d'extraire le canal vert d'une couleur donc, et la fonction blue qui va me permettre d'extraire le canal bleu de cette couleur. Eh bien, voilà pour les ingrédients dont je vais avoir besoin. Donc je retourne au niveau de mon éditeur de code, et je vais créer donc cette mixin que je vais appeler Hex to rgba, donc elle s'appelle hexToRgba et elle va prendre, cette mixin, vous devez bien vous en douter, deux paramètres : le premier c'est la couleur à convertir, et puis le second ce sera l'opacité et je vais donner à cette opacité une valeur par défaut de un, c'est-à-dire de 100%, donc complètement opaque. Alors, les couleurs en rgba, bah ça s'écrit comme ceci donc en css3 : rgba et puis dans les parenthèses, je vais devoir mettre quatre paramètres : le r, le g, le b, et le a. Alors, le r c'est quoi ? Eh bien, je vais utiliser la fonction red de less, et je vais aller chercher donc le canal rouge de la couleur qui est passée à la mixin. Au niveau du green et du blue, ce sera exactement la même chose, donc pour le vert et pour le bleu, sauf que je vais utiliser la fonction green de less, et ici la fonction blue de less et puis pour le paramètre a de rgba, donc pour l'opacité, eh bien, je vais tout simplement réutiliser tel quel le paramètre opacity, donc qui est passé ici à ma mixin. Donc voilà, ici j'ai une mixin qui va pouvoir convertir une couleur en hexadécimal en une couleur en rgba. Maintenant, le problème, ce sera de pouvoir renvoyer le résultat, eh bien, plus bas dans le code qui a appelé donc cette mixin. Alors pour ça, je vais stocker le résultat de cette opération dans une variable less que je veux appeler par exemple, rgbaColor comme ceci. Et donc, au niveau de mon header ici, vous voyez que j'ai une background-color qui est égale à du rouge pour le moment, donc c'est une variable, donc ce rouge est défini ici dans headerColor, le voici, donc c'est F00. Eh bien, je vais maintenant au niveau de mon header, appeler ma mixin hexToRgba, je vais demander de convertir cette couleur headerColor, et je vais lui donner une opacité par exemple de 80%, donc 0.8, donc qu'est-ce qui va se passer ici ? Je vais exécuter ma mixin et ma mixin va aller créer donc cette variable rgbaColor. Alors la petite astuce, la voici : je vais tout simplement répéter ici mon background-Color, mais plutôt que de lui donner une valeur de headerColor, je vais lui donner la valeur de rgbaColor, c'est-à-dire de la variable qui a été créée donc par la mixin. Donc vous voyez ici, c'est une petite astuce, ce n'est pas la mixin elle-même qui va me renvoyer une valeur comme on le ferait en JavaScript ou en PHP avec return, c'est plutôt directement donc le style less ici qui va pouvoir accéder à une variable créée par la mixin. Je vais sauvegarder mon fichier, regardez ce que ça donne au niveau du fichier css compilé, donc j'ai deux versions ici de ma couleur : la version en hexadécimal, donc la version complètement opaque, et puis la même couleur convertie en rgba par ma mixin. Et qu'est-ce que ça donne maintenant au niveau de mon navigateur ? Eh bien, regardez, je peux voir la grande palace à travers mon en-tête.

Découvrir LESS

Étendez le langage CSS avec LESS. Exploitez les fonctions d'automatisation, comme les variables, les fonctions, et la possibilité d'écrire du code de manière imbriquée.

2h59 (30 vidéos)
Aucun commentaire n´est disponible actuellement
Spécial abonnés
Date de parution :21 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !