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

Imbriquer des mixins

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Voyez comment imbriquer des mixins les uns dans les autres. Puis étudiez la portée des variables dans de telles classes.

Transcription

Une autre fonctionnalité du language less, c'est la possibilité d'imbriquer des mixins les unes dans les autres, c'est-à-dire de définir une mixin à l'intérieur d'une autre et d'appeler cette mixin depuis le corps d'une mixin plus importante. Alors, pour vous illustrer tout cela, eh bien, j'ai créé une super mixin borderRadius, c'est-à-dire une version unique de notre mixin borderRadius qui va prendre en charge, eh bien, l'ensemble des cas de figure. Alors, cette super mixin borderRadius eh bien, je peux lui passer zéro argument, un argument, deux arguments ou quatre arguments, et donc comme je ne sais pas à l'avance combien d'argument je vais passer à ma mixin, eh bien j'utilise ici dans les parenthèses les trois petits points. Les trois petits points, ça veut dire ici, eh bien, que cette mixin peut accepter un nombre non-déterminé d'arguments. Alors, qu'est-ce que je vais faire à l'intérieur de cette mixin ? Eh bien, la première chose que je vais faire, c'est justement essayer de déterminer combien d'arguments on m'a passés. Alors pour ça je vais utiliser la variable spéciale argument, dont on a déjà parlée, et rappelez-vous que cette variable spéciale n'existe que dans les mixins. Bah ça tombe bien, je suis justement dans la mixin borderRadius et elle représente cette variable spéciale, la liste des arguments qu'on a passés à la mixin. Ensuite, je vais utiliser la fonction length du langage less qui va en fait tout simplement me renvoyer la longueur d'une liste, en l'occurrence ici, la longueur de la liste d'arguments, et je stocke ceci dans la variable numArgs. Donc grâce à ceci, je sais combien d'arguments on a passés à la mixin. Premier cas de figure : numArgs est égal à zéro, donc là j'utilise une mixin gardée, et regardez, c'est ici que je commence à imbriquer des mixins, les unes dans les autres puisque je crée à l'intérieur de la mixin borderRadius la mixin makeRadius, et cette mixin ici, eh bien elle est gardée, donc je vais l'utiliser lorsque je ne passe aucun argument, À ce moment-là, j'imbrique de nouveau une mixin puisque je crée une troisième mixin à l'intérieur de borderRadius, celle-ci, je l'ai appellée createRadius et je lui passe quatre fois la valeur defaultRadius. Regardez la mixin createRadius, elle est ici dans le fond, et c'est elle en fait qui va effectivement écrire l'instruction borderRadius dans le css qui sera compilé. Donc celle-ci on l'a connait, on l'a déjà utilisée plus tôt, dans les vidéos de ce chapitre. Donc ça c'est un premier cas de figures. Alors, je peux également passer un argument à ma mixin borderRadius. Donc ici, je vais avoir une deuxième version de ma mixin makeRadius, lorsque le nombre d'arguments passés est égal à un. Alors pour pouvoir accéder à cet argument, eh bien, je vais utiliser une autre fonction de less qui est la fonction extract, alors vous voyez que cette fonction, elle va prendre deux paramètres : le premier paramètre, c'est une liste, et le deuxième paramètre c'est un index. Donc ici, grâce à la fonction extract, eh bien, je vais extraire le premier élément de la liste d'arguments, je stocke ça dans une variable que j'appelle arg et que j'utilise comme paramètre de ma mixin makeRadius. À ce moment-là, eh bien, je dois vérifier que le paramètre en question qui est passé est un nombre ou pas, parce que dans ce cas ci, bah ça peut être une valeur en pixel ou bien ça peut être le mot clé top et bottom. Donc à ce moment-là, je dois passer encore par une mixin supplémentaire que j'imbrique à l'intérieur de makeRadius. Celle-ci, je l'ai appelée evaluateArgs, et donc je regarde si l'argument en question est un nombre. Là, j'utilise une mixin gardée et si c'est un nombre eh bien, j'appelle ma mixin createRadius en passant quatre fois le nombre passé pour pouvoir exécuter donc cette mixin, et avoir un arrondi identique aux quatre coins de l'élément mais un arrondi personnalisé donc avec la valeur en pixel qui a été passé. Par contre, si l'argument en question c'est le mot-clé top, à ce moment-là, eh bien, je dois utiliser le defaultRadius pour les coins supérieurs et rien du tout pour les coins inférieurs, et si l'argument en question c'est le mot-clé bottom, eh bien, c'est l'inverse : je dois mettre zéro pixel d'arrondi au-dessus et le defaultRadius en-dessous, et puis, pour que ça fonctionne, je ne dois pas oublier, bien évidemment, d'exécuter cette mixin evaluateArgs à l'intérieur de makeRadius en lui passant justement l'argument que j'ai extrait ici de la liste d'arguments passés à borderRadius. Eh bien oui, tout ça est maintenant imbriqué. Ça c'est le deuxième cas de figure. Troisième cas de figure : when(@numArgs = 2) c'est-à-dire quand je passe deux arguments. Ça c'est le cas de figure où le premier argument est soit top, soit bottom, et le second argument, une valeur en pixel qui représente, eh bien l'arrondi que je veux donner au coin supérieur ou inférieur de mon élément. Donc je vais également utiliser la fonction extract pour aller rechercher les deux arguments passés dans la liste d'arguments : le premier, je vais l'appeler operation, et le second, je vais l'appeler radius, et donc ici je reprends ma mixin evaluateArgs et j'utilise une correspondance de motif pour vérifier si l'opération est top ou bottom, et donc, exécuter finalement l'une de ces deux versions-ci d'evaluateArgs, et puis il ne faut pas oublier bien évidemment d'exécuter cette mixin en lui passant les deux paramètres qui ont été extraits ici au-dessus depuis la liste d'arguments qui avaient été initialement passés à borderRadius dans les trois petits points. J'ai encore un cas de figure dont je dois tenir compte : when(@numArgs = 4) donc quand je passe quatre valeurs à ma mixin borderRadius, eh bien, à ce moment-là, je vais extraire ici ces quatre arguments, vous voyez que extract à la première position, à la deuxième position, à la troisième, et à la quatrième, et je vais stocker les quatre donc, arguments passés dans quatre paramètres topLeft, topRight, bottomRight et bottomLeft et je vais ensuite utiliser donc ce createRadius ici pour exécuter donc cette fonction. Ne pas oublier bien évidemment tout à la fin d'exécuter la mixin makeRadius. Alors, ceci est évidemment déjà beaucoup plus avancé, donc ne vous inquiétez pas si vous n'avez pas tout compris, je voulais simplement vous montrer dans ce cours jusqu'où on pouvait aller, en fait, avec des mixins, et comment quand on mélange un petit peu tous ces concepts, on peut mettre des mixins les unes dans les autres, les imbriquer et donc avoir des choses comme ça, relativement sophistiquées.

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 !