Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir LESS

Utiliser la correspondance de motifs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous pouvez créer plusieurs mixins ayant le même nom, notamment grâce à la correspondance de motifs.

Transcription

Dans cette vidéo, vous allez découvrir une autre façon qu’utilise less pour déterminer la version du mixin qu’il faut utiliser. Alors, on appelle cela la correspondance de motif ou en anglais : le pattern matching. Alors, pour vous illustrer comment ca fonctionne, eh bien, je vais garder exactement le même fichier HTML que dans la vidéo précédente et je vais repartir du fichier less que nous avions créé également dans la vidéo précédente. Au niveau du navigateur, voilà ce que ça donne donc pour le moment. Alors, je vais partir du principe que sur cette page web, eh bien, dans l'entête je ne veux arrondir que les coins supérieurs : supérieur gauche et supérieur droit mais pas les coins inférieurs ici, de mon élément header. Pour mon élément footer, pour le pied de page, eh bien, c’est exactement l’inverse, j’ai envie d’arrondir les coins inférieurs uniquement mais pas les coins supérieurs. Je vais également partir du principe que je vais devoir utiliser ce genre de chose régulièrement dans mon site, donc je vais avoir beaucoup d’éléments où je ne voudrais arrondir que les coins supérieurs ou que les coins inférieurs. Donc je vais prévoir le coup au niveau de mes mixins et donc je vais créer ici deux versions supplémentaires de ma mixin. Ça s’appelle toujours borderRadius, comme ceci. Voilà, je vais dupliquer avec COMMANDE ou CONTRÔLE-D cette ligne de code et je vais créER une version de ma mixin pour arrondir les coins supérieurs, donc je vais écrire ici top et une version de ma mixin pour arrondir les coins inférieurs, je vais écrire ici bottom. Au passage, top et bottom ne sont pas ici des mots-clés réservés par le langages less, simplement ça a du sens ici d'écrire top et bottom, mais vous pourrez écrire absolument n’importe quoi hein. Alors, au niveau de ma mixin top, eh bien, qu'est-ce que j’ai envie de faire ? J’ai envie d'arrondir uniquement les coins supérieurs donc je vais reprendre ceci, voilà. Au niveau des coins supérieurs donc, je vais utiliser pour commencer le defaultRadius, donc je vais prendre ici le defaultRadius pour les coins supérieurs et puis je veux 0 pixel pour les coins inférieurs. Voilà. Pour l’autre version de ma mixin, eh bien, j’ai besoin de presque la même chose donc je vais copier-coller ceci mais c’est l’inverse donc je veux 0 pixel pour les coins inférieurs et je vais utiliser pour le moment le defaultRadius pour les coins supérieurs comme ceci. Alors, vous voyez ici que, eh bien, j’ai un petit problème parce que j’ai trois versions finalement de ma mixin qui utilisent un seul argument. Donc à ce niveau là, eh bien, less ne va plus pouvoir compter sur la correspondance d’arguments, dont on a parlée dans la vidéo précédente, pour déterminer quelle version de la mixin il faudra utiliser. Alors, on va voir comme ca marche, donc je vais utiliser maintenant ce mixin ici, dans le fond. Donc ici pour le header j’ai envie d’arrondir les coins supérieurs uniquement pour la section, je vais pour le moment garder ce qui est écrit et pour le footer, eh bien, j’ai besoin d’arrondir uniquement les coins inférieurs, donc je vais marquer ici bottom. Je sauvegarde, je n’ai pas d’erreur à la compilation. Vous voyez ici le petit v vert, donc ça, c’est plutôt déjà une bonne nouvelle. Par contre, regardez ce qui s’est passé au niveau de la feuille de style compilé. Mais ce n’est pas tout à fait ce à quoi on s'attendait. Donc au niveau de header, vous voyez que ma mixin, elle a été utilisée deux fois, une fois avec l’argument top et puis une seconde fois, vous le voyez, avec 20 pixels pour les coins supérieurs et rien du tout pour les coins inférieurs, alors, qu’est-ce qui s’est passé ? Donc ici, j’appelle ma mixin avec un seul argument. Et donc, grâce à la correspondance d’arguments dont on a parlée dans la vidéo précédente, eh bien, less à utiliser cette version-ci de ma mixin. Et il y a considéré que la valeur du paramètre radius, eh bien, c’était top, et donc il a généré un borderRadius avec top, top, top, top, tout simplement. Ensuite, il a éxecuté une deuxième version de ma mixin, et là, il a utilisé la correspondance de motif pour déterminer que c’était cette version-ci de ma mixin que je voulais utiliser avec le mot-clé top qui est ici, et là et il a correctement ici créé des borderRadius avec le defaultRadius c'est-à-dire 20 pixels pour les coins supérieurs et 0 pixel pour les coins inférieurs. Donc voilà pourquoi, on a ici la mixin qui a été utilisée, qui a été exécutée deux fois. Une fois, à cause de la correspondance d’arguments et une seconde fois à cause de la correspondance de motifs. Ça se passe exactement de la même façon ici pour le footer. Vous voyez que ma mixin a également été exécutée deux fois : une fois à cause de la correspondance d’arguments, et à ce moment-là, eh bien, less a bien exécuté ceci, et il a considéré que la valeur de l’argument radius, eh bien, c’était bottom. Et donc il a fait borderRadius, bottom, bottom, bottom, bottom, et puis il a exécuté la mixin une seconde fois, et cette fois ci, il a utilisé la correspondance de motif pour se rendre compte que c’était ceci qu’il fallait utiliser et donc regardez, j’ai ici les coins supérieurs qui sont à 0 pixel, et les coins inférieurs à 20 pixels. Bonne nouvelle quand même au niveau de la section, eh bien, tout s’est passé normalement, tout s’est passé comme d’habitude puisque là, je passe ici un seul argument qui est 30 pixels, et vous voyez que cet argument ici ne correspond qu’à cette mixin-ci. Ça, c’est la correspondance de motif qui a donc permis à less de déterminer que c’était ceci qu’il fallait utiliser et aucune de ces deux versions, malgré qu’elles ont également un seul argument. Donc là, ça fonctionne correctement. Alors, on va voir que ça donne au niveau du navigateur, et vous voyez qu’au niveau du navigateur, eh bien, ça marche quand même comme on veut que ça fonctionne, vous voyez que je n’ai pas de coin arrondi ici pour les coins inférieurs de l’en-tête, ni pour les coins supérieurs du pied du page Donc ça fonctionne comme il faut, et puis, pour avoir le résultat visuel que l’on veut, vous avez deviner, je vais tout simplement ne pas appeller ici ma mixin. Voilà au niveau de ma section, je recompile. Quand je reviens dans mon navigateur, voilà ce que ça donne. Autre façon encore, je vais aller un tout petit peu plus loin ici puisque je vais donner à ces deux mixin, avec top et bottom un argument supplémentaire, je vais l’appeller radius, comme ceci, je vais lui donner une valeur par défaut qui sera effectivement la valeur de defaultRadius. Voilà, donc je vais faire ça pour les deux versions ici de ma mixin. Alors attention, je me fais toujours avoir, dans less, ce n'est pas une virgule pour séparer les arguments comme en JavaScript ou en PHP mais bien un point-virgule, faites attention à cela. Et donc ici je ne vais plus directement faire appel au defaultRadius mais plutôt à ce nouveau paramètre radius et donc ici, ma mixin eh bien, elle va pouvoir accepter un ou deux arguments, puisque le second argument a une valeur par défaut. Alors, on va voir si ça fonctionne bien : donc regardez ici, je vais garder par exemple top pour le header et pour le footer je vais passer deux arguments dans bottom et par exemple 40 pixels, on va voir ce que ça donne, donc je recompile, voyez que je n’ai pas d’erreur à la compilation et au niveau de ma feuille de style css, eh bien, j’ai toujours ici au niveau du header, le même problème de ma mixin qui est exécutée deux fois, par contre vous voyez ici qu’au niveau du footer, eh bien, ça s’est plutôt bien passé, puisque j’ai passé maintenant deux arguments, autrement dit, grâce à la correspondance d’arguments, eh bien, less a pu déterminé que je devais utiliser l’une de ces deux versions-ci, mais grâce à la correspondance de motif, eh bien, il a choisi la version que je sélectionne maintenant, parmi les deux possibles et donc ici, ça s’est fort bien passé, vous le voyez pour le footer et au niveau maintenant de ma page web, eh bien, voici ce que ça donne, vous voyez que j’ai pu arrondir les coins inférieurs de mon footer un petit peu plus. Alors, il me reste un problème à résoudre, c’est celui ici, de mon élément header avec la mixin qui s’exécute deux fois. Eh bien, je vous propose de résoudre ce problème dans la vidéo suivante.

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 !