Découvrir LESS

Créer des boucles

Testez gratuitement nos 1298 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez comment exécuter une classe mixin plusieurs fois afin de générer automatiquement des classes CSS.

Transcription

Dans cette vidéo, nous allons utiliser une mixin less pour générer des classes css, et comme je veux générer plusieurs classes eh bien, je vais devoir exécuter ma mixin plusieurs fois, et donc je vais devoir établir une boucle. Alors pour vous illustrer tout cela, eh bien, j'ai un fichier html qui est presque le même que celui qu'on a utilisé dans les vidéos précédentes de ce chapitre. La seule différence c'est que j'ai divisé ici ma section principale en deux div, et vous voyez que chacun de ces deux div contient un paragraphe de texte. Au niveau du navigateur, voici ce que ça donne : donc j'ai les deux paragraphes de texte qui sont ici, chacun dans son div donc, dans la section principale du site. Alors ce que j'ai envie de faire, eh bien, c'est de diviser ceci en deux colonnes, donc de séparer, de mettre une colonne à gauche, une colonne à droite. Alors vous savez que dans le design web modern, eh bien, pour mettre des choses en colonne comme ça, on imagine une grille virtuelle derrière le site avec des colonnes, donc, c'est comme ça par exemple que fonctionne bootstrap hein, bootstrap fonctionne avec un système de 12 colonnes. Eh bien moi, je vais imaginer ici un système de six colonnes, ça va me donner six positions possibles pour chacune des deux colonnes que je veux faire. Donc je vais retourner au niveau de ma feuille de style less, voilà, je vais créer une variable que je vais appeler numCols comme ceci, et je vais la rendre égale à la valeur six puisque je veux créer six colonnes. Au passage, le jour où vous voudrez 12 colonnes, il vous suffira de venir changer la valeur de cette variable donc. Alors au niveau de ma mixin, eh bien, je vais créer une mixin que je vais appeler makeCols comme ceci, cette mixin, eh bien elle va prendre deux paramètres. Le premier paramètre, je vais l'appeler cols, c'est le nombre de colonnes à créer, et je vais donner à ce paramètre une valeur par défaut qui est égale donc à la valeur de la variable numCols que j'ai créée un petit peu plus tôt. Et puis, le deuxième paramètre, c'est un paramètre extrêmement important, je vais l'appeler i, i comme index, et je vais lui donner une valeur par défaut de un. Alors pourquoi est-il important ? Parce que comme je vais devoir exécuter cette mixin plusieurs fois, je vais devoir boucler, eh bien, c'est cette variable, cet index, qui va me permettre de contrôler la boucle et puis, à un moment donné, de dire à less qu'il faut sortir de la boucle sinon je vais rester dans une boucle infinie. Justement, pour pouvoir faire ça, je vais créer une mixin gardée, donc j'ai besoin du mot-clé when, et je vais lui dire, eh bien, exécute cette mixin mais à condition que l'index soit inférieur ou égal au nombre de colonnes à créer, c'est-à-dire à la valeur du paramètre cols donc qui est passé à cette mixin. Comment ça va se passer ? Donc au niveau de la mixin, eh bien regardez, je vais devoir bien sûr l'exécuter cette mixin makeCols et je ne vais lui passer aucun argument, comme ça, eh bien, je vais faire référence aux valeurs par défaut que j'ai inscrites ici. Et puis, à l'intérieur de cette mixin, et c'est ça le secret finalement, eh bien, je vais la rappeler cette mixin, c'est-à-dire que je vais exécuter makeCols depuis l'intérieur de makeCols, mais cette fois-ci, je vais passer des paramètres. je vais d'abord passer toujours le nombre de colonnes à créer donc, le nombre de colonnes qui sera passé ici à la mixin la première fois que je l'appelle, et puis surtout, je vais passer en deuxième argument, l'index, mais incrémenté de 1, comme ceci. C'est ça qui va changer la valeur de l'index et qui à un moment donné va faire en sorte que cette variable i va devenir supérieure au nombre de colonnes à utiliser, et à ce moment-là, j'ai un garde ici qui me dit : eh bien c'est fini, on n'exécutera plus. Alors, allons-y maintenant pour la mixin en tant que telle, eh bien, j'ai envie de créer une classe css qui s'appellera col-@i, c'est-à-dire : col-1, col-2, col-3, etc. et cette classe css, eh bien, elle va faire un display inline-block, c'est comme ça que je vais mettre mes éléments les uns à côté des autres, elle va également faire un vertical-align top, puisque quand on utilise les inline-block, eh bien, par défaut, l'alignement vertical est bottom, et ça, ça ne m'intéresse pas, et puis je vais également faire un box-sizing de border-box, alors ça, c'est du css, ça, ça veut dire tout simplement que je vais inclure la valeur des éventuels paddings des bordures dans le calcul de la largeur de mon élément. Alors justement, pour la largeur de mon élément, c'est là que ça va un petit peu changer puisque je vais devoir faire un petit calcul, je vais donc prendre la valeur de l'index : un, deux, trois, quatre, cinq ou six donc, je vais le multiplier par 100%, ça, ça me permettra d'avoir un résultat en %, et puis le diviser par le nombre de colonnes à générer, voilà qui est fait. Alors attention, si je sauvegarde ceci, eh bien, vous allez voir, j'ai une petite erreur. En effet, j'ai une erreur en ligne 14, il me dit Unrecognised input, la ligne 14, c'est celle-ci, alors effectivement, il y a un petit problème ici avec mon i, regardez, less ne comprend pas très bien ce qu'il doit faire parce que pour ce genre de choses, pour des chaînes de caractères avec une partie donc dynamique, c'est le cas ici, j'ai besoin d'une petite syntaxe particulière et je vais devoir mettre ici le i entre accolade pour indiquer à less qu'il s'agit d'une partie dynamique donc de ma chaîne de caractères. Je sauvegarde et maintenant vous le voyez, je n'ai plus d'erreur de compilation. Qu'est-ce qui s'est passé dans ma feuille de style compilée ? Eh bien, regardez, j'ai créé une série de classe css, j'en ai créé six puisque j'ai exécuté ma mixin six fois, elles ont chacune vous le voyez, une largeur un petit peu différente et donc maintenant que mes classes css sont créées, je vais pouvoir mettre mes éléments en colonnes. Imaginez que sur les six colonnes, eh bien j'ai envie que mon premier div prenne deux des six colonnes, eh bien, je vais lui donner la classe col-2, alors est-ce que j'avais mis un s à cols ? Je ne me rappelle plus, non, c'est col sans s. Voilà. Et puis pour la deuxième classe, eh bien, si la première div prend deux des six colonnes, le deuxième div ici va pouvoir prendre les quatre colonnes restantes comme ceci, je sauvegarde, je vais voir dans mon navigateur, et voici mes deux colonnes : ici donc, j'ai une première colonne qui prend deux places sur la grille de six et là une deuxième colonne qui prend les quatre classes restants. Si vous voulez changer ceci, eh bien, c'est très simple, vous mettez par exemple col-3 et col-3, vous aurez alors deux colonnes de largeur identique comme ceci, et puis si vous voulez un jour avoir plus de finesse et créer 12 colonnes, c'est très facile, vous retournez dans votre feuille less ici, vous changez la valeur de numCols, vous re-sauvegardez et donc ça génèrera une nouvelle version de styles.css avec cette fois-ci, vous le voyez, 12 colonnes possibles avec chaque fois une largeur différente. Voici donc comment on peut créer des boucles ici en less, et vous avez ici la base de la création d'un design sous forme de grille.

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 !