L'essentiel de Sass

Tirer parti des boucles

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Sass dispose de plusieurs mécanismes pour répéter un groupe de codes sans le réécrire. Dans cette séquence, vous utiliserez l'une de ces boucles grâce à la directive @each.

Transcription

Dans cette vidéo, nous allons résoudre le second problème de notre fonction. Cela va nous permettre de découvrir une construction plus avancée de SASS, je vais vous parler, dans cette vidéo, des boucles. Quel est le problème ? Le problème, c'est que, de temps en temps, je passe dans ma fonction ce type de choses un peu particulières. Ce genre de choses, SASS va le considérer par défaut comme une chaîne de caractères, mais si vous y regardez à deux fois, il s'agit, en fait, d'une liste d'éléments séparés par un espace. L'espace, je vais le considérer comme un séparateur, et l'ensemble, je vais le considérer comme une liste. Figurez-vous que SASS est capable de travailler avec de telles listes. Il y a d'ailleurs plein de fonctions entièrement dédiées à cela. La première d'entre elles, c'est Length, qui me renvoie la longueur d'une liste. Si on va voir comment ça fonctionne, je lui passe une liste en paramètre et si elle contient un seul élément, cette fonction me renvoie 1, le nombre d'éléments dans la liste, et si cette liste contient plusieurs éléments, eh bien dans ce cas, cette fonction me renverrait 3, le nombre d'éléments dans la liste. Je vais pouvoir me servir de ceci pour vérifier, pour détecter si j'ai affaire à une liste ou pas. Retournons dans notre fonction. Je vais avoir besoin d'un deuxième Else avec son propre bloc de code, comme ceci, et dans le deuxième Else, j'ai besoin d'un deuxième If. Au passage, on l'appelle un « else if », une construction raccourcie dans SASS. Et je n'ai pas besoin du @ devant le If quand j'utilise cette construction. Le deuxième test que je veux réaliser, c'est de vérifier Length, la longueur de ma Value, c'est l'argument qu'on passe à Unitize, et si la longueur de cette Value est plus grand que 1, je sais que j'ai affaire à une liste. Que dois-je faire dans ce cas-là ? Je dois regarder un par un chacun des éléments de cette liste. C'est là que va intervenir ma fameuse boucle. J'ai plusieurs façons de faire des boucles, dans SASS, celle qui me parait la plus appropriée c'est la boucle Each. « Each », en anglais, ça veut dire « chaque ». Pour chaque Item, je crée une variable Item, qui se trouve dans ma liste Value. « For each item in value » : pour chaque élément dans la liste Value, et là, j'ai besoin, de nouveau, d'un bloc de code. Voilà ma boucle, ce que je vais écrire dans ce bloc, entre l’accolade qui s'ouvre et celle qui se ferme va être exécuté plusieurs fois. Oui, mais combien de fois ? Eh bien, dans mon cas, ça va être exécuté quatre fois, parce que j'ai quatre éléments dans ma liste. Et le plus intéressant, c'est la variable Item que je crée, au niveau de la liste. Celle-ci va avoir une valeur différente à chaque itération de la boucle. Elle aura la valeur 5 la première fois, 0 la deuxième fois, 0 la troisième fois et 5 la quatrième fois. Alors, qu'est-ce que je vais pouvoir faire avec cette variable Item ? Je vais regarder si cette variable Item est un nombre, si elle a une valeur, si elle en a une, je ne fais rien du tout, si elle n'a pas de valeur, je lui donne l'unité par défaut. C'est-à-dire, je vais faire un Unitize de ($item), comme ceci, et je vais stocker le résultat de cette opération dans une autre variable que je vais appeler CurrentValue, par exemple, comme ceci. Maintenant, que faire avec cette CurrentValue ? Que vais-je renvoyer à l'expéditeur, qu'est-ce que la fonction va retourner ? Eh bien, si je retourne au niveau des Buttons, ici, je lui envoie une liste, à cette fonction, et j'attends d'elle qu'elle me retourne une liste également. Une liste qui sera égale à : 5px 0px 0px 5px. Retour dans la doc. Au niveau de la documentation, une autre fonction de liste s'appelle Join et elle me permet de joindre ensemble deux ou plusieurs listes en une seule. Cette fonction Join, elle prend deux listes en paramètres, en arguments, et elle fabrique une liste plus importante avec les deux qu'on lui donne. Je vais pouvoir me servir de ça, regardez comment je vais m'y prendre, dans ma fonction, juste avant ma boucle, je vais créer une variable que je vais appeler ToReturn, et que je vais rendre égale à du vide, à rien. Pour dire « rien » en SASS, j'ouvre et je ferme une parenthèse. En ligne 5, je déclare cette variable mais je ne lui donne aucune valeur. Ensuite, dans ma boucle, je vais modifier la valeur de ToReturn. Je vais dire que, maintenant, la variable ToReturn, elle est égale à Join de la valeur actuelle ToReturn et de CurrentValue, c'est-à-dire le résultat de UnitizeItem. Au fur et à mesure des itérations de ma boucle, je vais ajouter des éléments dans cette variable ToReturn qui sera, en fait, une liste. Une fois que ma boucle est finie, qu'est-ce que je fais ? Je fais un Return, je renvoie un Return de cette variable ToReturn, comme ceci. Voilà, je n'ai pas d'erreurs et je vais voir si cela fonctionne. Je vais revenir dans Buttons, aux environs de la ligne 3500. Vous voyez que ça a l'air de fonctionner correctement car j'envoie ceci dans ma fonction et regardez ce que j'obtiens en retour. 5px 0px 0px 5px, ma boucle est bien en route. Remarquez que si l'un de ces éléments a déjà son unité de mesure, celle-ci sera normalement maintenue. Effectivement, regardez ce qu'il se passe, cette unité de mesure est bien maintenue donc ma fonction fonctionne dans tous les cas de figure. Je vais pouvoir parachever mon travail en incluant, une fois encore, ma « mixin » BorderRadius avec, cette fois-ci, 0 5 5 0, et voilà, ça fonctionne très bien, ma boucle est en place. Dans cette vidéo, vous avez appris une deuxième fonction avancée de SASS, la construction Each qui permet de boucler, vous avez également appris quelques fonctions supplémentaires. On peut aller très loin avec tout cela.

L'essentiel de Sass

Abordez et intégrez Sass dans votre flux de travail. Découvrez les options pour compiler votre code Sass en CSS, passez en revue les mécanismes pour le réutiliser, etc.

2h59 (31 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Sass Sass 3.4.22
Spécial abonnés
Date de parution :25 avr. 2017

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 !