L'essentiel de Sass

Utiliser les directives @if et @else

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Appréhendez et mettez en œuvre les directives @if et @else. Ainsi, vous pourrez inclure de la logique conditionnelle dans vos feuilles de style.

Transcription

Dans ce chapitre, vous découvrirez certaines constructions avancées de SASS. Dans un premier temps, cela va nous permettre de parfaire la fonction que nous avions définie dans le chapitre précédent. Cette fonction, la voici. Rappelez-vous ce qu'elle fait, elle ajoute l'unité de mesure par défaut à la valeur qu'on lui envoie et, pour le moment, ça pose un petit souci. Rappelez-vous, dans « Buttons.scss », si la valeur que j'envoie dans ma fonction possède déjà une unité de mesure, c'est le cas avec % : ça fait 10%px. Ma fonction va quand même rajouter l'unité de mesure par défaut à la valeur. Cela ne me convient pas du tout. Je veux que ma fonction n'intervienne uniquement quand la valeur envoyée n'a pas d'unité de mesure, au départ. Regardez, j'ai retiré le % et là, ma fonction remplit son office, elle fait son travail, elle rajoute l'unité de mesure par défaut. Retournons dans cette fonction. Y a-t-il un moyen de détecter si la valeur que j'envoie dans ma fonction possède ou pas, au départ, une unité de mesure. Allons voir dans la documentation de SASS. J'apprends qu'il y a des fonctions d'introspections disponibles. L'une d'entre elles s'appelle « Unitless » et prend un nombre, comme paramètre. Cette fonction va me renvoyer si le nombre possède une unité de mesure. Allons voir comment ça marche. Cette fonction Unitless prend un nombre, comme paramètre, et regardez les exemples. Si le nombre en question n'a pas d'unité de mesure, « Unitless » renvoie « True », et si le nombre en possède une, la fonction renvoie « False ». C'est ce dont j'ai besoin ! « Unitless » va me permettre de détecter si la valeur envoyée dans ma fonction a déjà une unité de mesure. Je dois prendre une décision en fonction de ce que « Unitless » va me révéler. C'est là que l'on va introduire cette construction qui est le « If ». « If », en anglais, ça veut dire « si », les programmeurs connaissent très bien ce genre de choses, c'est courant dans les langages de programmation. Si vous n'êtes pas programmeur, qu'allez-vous faire en SASS après la directive « If » ? Vous allez mettre un espace et un test, vous allez tester quelque chose. Ce que ce test doit vous renvoyer, c'est soit « True », soit « False ». On appelle ça une valeur booléenne : oui, non ; vrai, faux. Blanc, noir ; 1, 0, etc., des choses binaires. C'est justement ce que fait ma fonction « Unitless », comme ceci. Je vais vérifier si la valeur « Value » que j'envoie dans ma fonction possède ou pas une unité de mesure, et si elle possède une unité de mesure, ça me renvoie « True ». Et que dois-je faire ? Dans un bloc de code avec des accolades, je dois exécuter cette ligne de code que je vais déplacer dans ce bloc de code, si la valeur que j'envoie n'a pas, déjà, une unité de mesure, je rajoute l'unité de mesure par défaut. Que se passe-t-il si « Unitless » me renvoie « False » ? C'est-à-dire, si la valeur que je passe à ma fonction « Unitize » a déjà une unité de mesure ? Dans ce cas-là, je dois faire autre chose. Autre chose en anglais, dans ce type de construction, c'est « Else ». Avec un autre bloc de code, j'ai les trois parties d'un « IF ». J'ai « If » , « Then », Si, Alors, « Else », Sinon, Si, Alors, Sinon. Qu'est-ce que je dois faire si « Unitless » renvoie « False »? Si la valeur a déjà une unité de mesure, je ne dois rien faire. Je dois simplement retourner, « Return », la valeur envoyée sans la modifier. Je sauvegarde, j'ai une erreur, qu'est-ce qu'on me raconte ? « Argument number or Unitless number must be a number. » Oui, ceci doit être un nombre, regardez dans la doc, on insiste fort sur le fait que ce paramètre est un nombre, et cela renverra une erreur, s'il n'est pas certain que ce paramètre est un nombre. C'est exactement ce qu'il se passe pour le moment. Rien ne me certifie que cette valeur-ci est un nombre. En plus de vérifier que ce nombre n'a pas d'unité, je vais d'abord devoir vérifier si c'est un nombre ou pas. Est-ce que je peux vérifier le type de donnée avec SASS ? Oui, je retourne sur ma documentation, dans les fonctions d'introspection, j'en ai une autre qui s'appelle « TypeOf » et qui retourne le type de donnée de la valeur qu'on lui passe. Comment ça marche ? Je dois lui passer une valeur, on va vérifier de quel type de valeur il s'agit, ça peut être un « Number », et remarquez que 100px est un « Number » malgré le px. Ça peut être une « string », une chaîne de caractères, ça peut être un booléen, «True-False » ou ça peut être une couleur. Ce sont les types de données avec lesquels SASS peut travailler. Grâce à « TypeOf », je vais pouvoir vérifier si cette valeur est un nombre et je dois faire la vérification avant de vérifier si ce nombre a une unité. Je vais créer « TypeOf » de la valeur qu'on envoie dans la fonction. Et je dois vérifier que cette valeur est un « Number », un nombre. Pour que j'ajoute l'unité de mesure par défaut à cette valeur, il faut que cette valeur soit un nombre et aussi que ce nombre n'ait pas d'unité. Il faut que les deux tests soient tous les deux vrais pour que je rajoute l'unité de mesure par défaut à ma valeur. J'unifie ces tests par le mot-clé « And », il faut que les deux soient vrais, je sauvegarde, regardez, je n'ai plus d'erreurs pour le moment. On va vérifier si cela fonctionne, dans « Buttons.scss », regardez, quand je ne passe pas d'unité de mesure avec ma valeur, ma fonction fait toujours son travail, elle ajoute l'unité de mesure par défaut, mais quand je passe une unité de mesure, par exemple %, la valeur m'est renvoyée telle quelle, donc, ma fonction ne met pas l'unité de mesure par défaut, on va voir si ça marche avec d'autres unités, avec « em », ça a l'air de marcher aussi, avec « rem » aussi, vous le voyez, j'ai apparemment résolu le premier de mes deux problèmes. Le deuxième problème, c'est celui-ci. Quand j'envoie d'autres types de données dans ma « mixin BorderRadius », regardez, ce n'est toujours pas résolu. Ceci n'est pas un nombre, c'est un type de données particulier dans SASS, qu'on appelle une liste. Je vais devoir inspecter chacun des éléments de cette liste pour voir un petit peu ce que je dois faire avec. Je vous propose de le faire dans la prochaine vidéo.

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 !