Découvrir LESS

Employer la correspondance d'arguments

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous pouvez utiliser plusieurs variantes d'une même classe mixin. Il s'agit d'utiliser la correspondance d'arguments.

Transcription

Nous allons continuer notre exploration des mixins en less, et nous allons pour cela aller un petit peu plus loin avec la propriété border-radius du CSS 3, puisque cette propriété me permet de définir des arrondis différents pour les quatre coins de mes éléments. Je vais donc modifier un petit peu ma mixin. Et plutôt que de passer un seul paramètre comme c’est le cas pour le moment, eh bien, je vais lui passer quatre paramètres. Le premier qui s’appellera topLeft. Ce sera l’arrondi du coin supérieur gauche. Ensuite je vais avoir topRight, comme ceci, donc l’arrondi du coin supérieur droit. Ensuite je vais avoir bottomRight, l’arrondi du coin inférieur droit. Et puis le quatrième paramètre, eh bien, ce sera bottomLeft, l’arrondi du coin inférieur gauche donc. Alors, je vais modifier également l’intérieur de ma mixin, comme ceci. Et donc je vais reprendre ces quatre arguments, et je vais juste supprimer ici le point-virgule. Ça c’est pour satisfaire à la syntaxe du CSS 3. Et je vais remplacer tout ceci pour les autres versions de mon border-radius. Alors attention, il ne me faut qu’un seul point-virgule ici à la fin de chaque ligne. Au passage, vous remarquez comment on peut faire passer plusieurs paramètres donc à une mixin. Il suffit de les lister ici dans les parenthèses, et de les séparer chacun par un point-virgule. Alors, au moment où j’appelle maintenant ma mixin ici plus bas, eh bien, je vais devoir à chaque fois passer les quatre paramètres. Et donc pour le header, mettons que topLeft, eh bien, j’ai envie que ça fasse 10 pixels. Pour topRight, j’ai envie que ça fasse 20 pixels. Pour bottomRight, ça fera 30 pixels. Et pour bottomLeft, eh bien, ça fera 40 pixels. Voilà, ça va être joli, tiens ça. Alors, au niveau de ma section maintenant, j’aurais envie par exemple d’un coin arrondi de 30 pixels partout. Eh bien, dans l’état actuel des choses, je dois répéter quatre fois ma valeur de 30 pixels comme ceci. Et puis pour mon footer, je dois également mettre quatre valeurs. Par exemple je vais mettre ici 0 pixel pour topLeft. Et puis je vais mettre 20 pixels pour topRight. Et puis je vais mettre mettons 30 pixels pour bottomRight. Et puis de nouveau 0 pixel pour bottomLeft. Je sauvegarde. Je n’ai pas d’erreur à la compilation, ce qui est plutôt bon signe. Et donc au niveau du fichier compilé, eh bien, vous voyez que maintenant j’ai quatre valeurs ici qui sont passées pour la propriété border-radius, et ces quatre valeurs sont chaque fois différentes, et ça dépend des arguments, des valeurs que j’ai donc envoyés dans ma mixin à chaque fois que je l’ai appelée. Au niveau de mon navigateur, eh bien, voilà ce que ça donne. Donc je peux avoir des arrondis différents, vous le voyez, aux quatre coins de mes éléments. Alors, tout ça est très bien, mais au niveau de mon code, vous voyez que c’est assez fastidieux finalement de chaque fois mettre quatre arguments dans les parenthèses. Moi, j’aimerais bien pouvoir utiliser ma mixin de trois façons différentes. D’abord j’ai envie de pouvoir l’utiliser sans argument. Donc d’utiliser ma mixin comme ceci, sans rien mettre dans les parenthèses au moment où j’appelle ma mixin. Et à ce moment-là, eh bien, je voudrais que les quatre coins aient le même arrondi qui soit égal ici à mon defaultRadius, donc pour le moment à 20 pixels. J’aurais aussi envie de pouvoir utiliser ma mixin en lui envoyant un argument, mais seulement une fois, et pas quatre fois. Et à ce moment-là, je voudrais également avoir les quatre coins arrondis de la même façon, mais la valeur de cet arrondi sera, eh bien, ce que je mettrais ici dans les parenthèses. Et puis j’ai envie aussi de pouvoir utiliser ma mixin avec les quatre arguments comme ceci. Et à ce moment-là, eh bien, je vais utiliser la version complète de ma mixin comme c’est le cas pour le moment. Alors, pour pouvoir réaliser ceci, eh bien, je vais définir ma mixin tout simplement trois fois. Donc je vais définir de nouveau ma mixin borderRadius, une seconde fois comme ceci. Et puis je vais utiliser le Command-D ou le Contrôle-D pour dupliquer ce code, pour définir ma mixin une troisième fois. Alors, qu’est-ce qui va changer ? Vérifiez bien, quand vous définissez comme ça vos mixins, de chaque fois utiliser exactement la même orthographe avec les mêmes majuscules et minuscules. Alors la première fois, je vais définir ma mixin sans aucun argument. Et la deuxième fois je vais définir ma mixin avec un seul argument, que je vais appeler radius comme ceci. Alors, quand je n’envoie aucun argument dans ma mixin, eh bien, qu’est-ce que j’ai envie de faire ? J’ai envie d’appeler la version complète de ma mixin, c'est-à-dire celle avec les quatre arguments. Mais j’ai envie que les quatre arguments aient chacun la même valeur de defaultRadius, 3, 4, comme ceci. Donc à ce moment-là, eh bien, je vais simplement ici créer en fait un raccourci, c’est ça que je fais. Donc quand j’appelle ma mixin sans argument, eh bien, cette mixin va à son tour appeler une autre version de ma mixin, celle avec quatre arguments. Mais les quatre arguments auront tous les quatre la même valeur qui est égale ici à la valeur de la variable defaultRadius. Alors, quand j’appelle ma mixin avec un seul argument, eh bien, j’ai également envie d’appeler la version complète de ma mixin. Mais cette fois-ci la valeur des différents arguments que je passe serait égale donc à cette variable radius, dont la valeur sera fixée par le paramètre que je passerai à ma mixin comme ceci. Alors, je vais sauvegarder ceci. Voyez que je n’ai toujours pas d’erreur de compilation. Et ça c’est de nouveau plutôt bon signe. Que s’est-il passé au niveau de la feuille de style compilée ? Eh bien, regardez ici pour le header, voyez, de 20 pixels à chaque fois. Pourquoi ? Eh bien, parce que j’ai appelé cette version-ci de ma mixin, c'est-à-dire la mixin sans argument. Et cette mixin a, à son tour, appelé la version complète de ma mixin, mais en utilisant pour valeur des quatre arguments la valeur ici de 20 pixels, de defaultRadius. La deuxième fois que j’ai appelé ma mixin au niveau de ma section, vous le voyez ici, eh bien, mes coins auront un arrondi tous de 30 pixels. Pourquoi ? Parce que j’ai appelé la deuxième version de ma mixin ici, celle qui prend un seul paramètre, qui à son tour, a appelé la version complète de ma mixin, mais en passant pour chacun des quatre paramètres, eh bien, la valeur que j’ai passée à ma mixin en un seul paramètre. Et puis la troisième fois que j’ai appelé ma mixin, donc ça, c’est ici dans le fond pour mon footer, eh bien, là j’ai rempli les quatre arguments. Donc là j’ai directement exécuté la version complète de ma mixin. Et vous voyez le résultat ici. J’ai bien quatre paramètres différents. Alors, je vais voir ce que ça donne au niveau du navigateur. Et vous voyez, eh bien que ça fonctionne très très bien. Donc je peux encore changer ici le comportement de ma mixin de cette façon-là. Alors ceci, on l’appelle une correspondance d’arguments. C'est-à-dire que pour décider de quelle version de la mixin il faut utiliser, eh bien, less va simplement regarder le nombre d’arguments que vous passez, et va décider en fonction de ça de quelle version de la mixin il faut utiliser. Alors dernière petite chose dans cette vidéo : vous voyez ici cette... la dernière version de ma mixin, je n’ai pas mal de paramètres ici, dedans. Alors j’ai un paramètre, une variable un petit peu spéciale dans less, qui s’appelle @arguments. Cette variable spéciale, elle est disponible à l’intérieur des mixins. Et il s’agit tout simplement de la liste des arguments qui sont passés à la mixin. Donc si je fais ceci, et que je fais @argument partout comme ceci, eh bien, ça va donner exactement la même chose. Mais vous allez voir que ma mixin sera beaucoup plus facile à lire, et puis surtout beaucoup plus facile et rapide à taper. Vous voyez que je sauvegarde, je n’ai pas d’erreur à la compilation. Par contre au niveau du style css qui est compilé ici, c’est exactement la même chose que tout à l’heure. Donc cette variable spéciale arguments - attention au pluriel - qui est disponible uniquement à l’intérieur des mixins, c’est simplement, je vous le rappelle, la liste ici des différents paramètres qui sont passés à la mixin. Donc voilà encore une autre façon de modifier le comportement des mixins dans less, la correspondance d’arguments. Less va donc vérifier combien d’arguments vous passez pour décider de quelle version de la mixin il faut utiliser.

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 !