Découvrir LESS

Travailler avec des mixins gardés

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à exécuter des mixins de manière conditionnelle. Il s'agit d'appliquer le mot-clé when ainsi que les mixins gardés.

Transcription

Pour résoudre le problème de la mixin qui s'exécute deux fois, comme vous le voyez ici, eh bien, on va d'abord se rappeler que ce problème se pose quand j'appelle ma mixin avec un seul argument, et que cet argument est le mot top ou le mot bottom. À ce moment-là, eh bien j'ai deux versions de ma mixin qui s'exécutent : cette version-ci, et puis l'une de ces deux versions-ci. Alors, on va essayer maintenant de mettre en évidence une différence entre les deux versions de la mixin qui s'exécutent. Et la différence, eh bien, elle est toute trouvée. La version d'un mixin, que je sélectionne pour le moment, a besoin que le paramètre Radius soit un nombre, si le paramètre que je passe n'est pas un nombre, mais une chaîne de caractères, en l'occurrence la chaîne de caractères top ou la chaîne de caractères bottom, eh bien, à ce moment-là, je ne dois pas utiliser la version de la mixin qui est sélectionnée pour le moment mais je dois utiliser plutôt l'une de ces deux versions-ci, et à ce moment-là, utiliser la correspondance de motif pour déterminer laquelle des deux il faut utiliser. Alors, est-ce que je peux avec LESS, eh bien, vérifier qu'un paramètre est un nombre ou pas ? Eh bien oui, pour ça je vais sur le site de lesscss. Rappelez-vous que LESS vous propose une série de fonctions, alors on va aller voir ici dans Function reference, et regardez, il y a des fonctions qui s'appellent des Type Functions ici qui vont me permettre de faire des tests sur les types de données, voilà, vous les voyez toutes listées ici, et la première d'entre elles s'appelle justement isnumber, alors cette fonction, elle va me renvoyer true quand la valeur que je teste est un nombre et false dans tous les autres cas, donc c'est très facile à utiliser, et évidemment cette fonction prend un paramètre, la valeur à tester, la valeur dont on veut vérifier si c'est un nombre ou pas. Alors, quelque chose d'intéressant ici, vous avez des exemples, et regardez ce qui va se passer ici avec une valeur en pixel. Vous voyez que quand je passe à cette fonction une valeur en pixel avec les lettres p et x, eh bien, la fonction va quand même me renvoyer true. Donc cette fonction elle est suffisamment maligne pour se rendre compte que px, bah ce ne sont pas des lettres classique en CSS, c'est une unité de mesure et donc 56px ici, eh bien, doit quand même être considéré comme une valeur numérique. Donc voilà le premier ingrédient dont je vais avoir besoin pour corriger mon problème. Le second ingrédient, je vais le trouver dans une autre partie du site, dans la partie Language Features que vous avez ici, et au niveau des mixins, eh bien, nous avons un système qui s'appelle des mixins gardées, vous voyez ici Guarded Namespaces, alors c'est assez simple à utiliser également, vous allez devoir utiliser le mot-clef when, et when en anglais signifie lorsque, et puis dans une paire de parenthèses après le mot-clef when, on va devoir mettre un test, et ce test, eh bien, s'il renvoie true, la mixin est utilisée, et s'il renvoie false, la mixin n'est pas utilisée, c'est ce qu'on appelle une mixin gardée, une Guarded mixin donc en anglais. Alors voilà, nous avons les deux ingrédients dont on va avoir besoin pour corriger notre problème, donc il est temps de revenir ici dans notre éditeur de code, et regardez, je vais créer ici une mixin gardée, donc je vais mettre le mot-clé when comme ceci, et puis dans les parenthèses, un petit test à realiser pour décider si la mixin doit être exécutée ou pas, et donc là, je dois vérifier si isNumber, - qu'est-ce qui est un nombre ou pas - eh bien, mon paramètre Radius comme ceci. Donc, cette mixin-ci maintenant ne sera utilisée que si le paramètre passé, le paramètre Radius est un nombre. Alors on va voir si ça fonctionne, donc je ne vais rien changer ici dans le fond, regardez, je vais passer top en paramètre ici, ce n'est pas un nombre et on va vérifier si oui ou non, ma mixin est maintenant exécutée deux fois ou pas. Donc je vais sauvegarder ceci, je n'ai pas d'erreur de compilation, j'ai l'impression que le problème est réglé. Vous voyez que ma mixin n'est plus exécutée deux fois. En effet, j'ai un seul argument qui est passé, donc on pourrait se dire que c'est cette version-ci de la mixin que je dois utiliser mais comme l'argument en question n'est pas un nombre, grâce à ma mixin gardée maintenant, eh bien, je passe mon tour pour cette version-ci et je vais vérifier l'une de ces deux versions et là, j'utilise la correspondance de motif pour determiner laquelle des deux je dois utiliser. Eh bien voilà, le problème est réglé.

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 !