Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Sass

Définir et utiliser une map

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à utiliser le type de données map de Sass. Cela vous permettra de générer automatiquement des media queries.

Transcription

Poursuivons notre aperçu de quelques unes des fonctions plus avancées de SASS, en nous penchant sur un type de données très particulier que l'on appelle, dans SASS une map. Alors, j'ai ici, dans la partie droite de mon écran, le fichier Variable.scss. Et regardez, dans le fond, j'ai défini une nouvelle variable. J'ai donc une variable qui s'appelle Breakpoints, au pluriel, et vous voyez la valeur de cette variable, c'est tout ce bloc-là. Ce bloc-là, ça se trouve entre parenthèses, j'ai donc une parenthèse qui s'ouvre et une parenthèse qui se ferme et dans ces parenthèses, je spécifie des paires clés-valeurs. J'ai une première clé, qui s'appelle « phone », et la valeur qui correspond, c'est 360px. J'ai une deuxième clé, « phone-wide », et ça correspond à la valeur 480px. Je sépare toutes ces paires clés-valeurs par une virgule, à chaque fois. Le tout est stocké dans cette unique variable Breakpoints. C'est ça, une map. Vous vous rendez compte de ce que je vais faire avec ça, je vais rendre mon site réactif, je vais créer des Media Query. Pour le moment, mon site a une largeur fixe de 960px. C'est défini dans main.scss au niveau de la classe Wrapper. Je vais déjà changer ceci, je vais lui donner une largeur de 100%. Comme ceci, et cela veut dire qu'au niveau de mon site, quand je rafraîchis, il prend toute la place disponible sur l'écran et quand je redimensionne la fenêtre de mon navigateur, il prend 100% de la place disponible, quelle que soit cette place, j'ai maintenant un site fluide. Ce n'est pas encore tout à fait ce que je veux. Ce que je vais faire, c'est que je vais créer, à l'intérieur de ma classe Wrapper, une Media Query. C'est une petite syntaxe particulière à SASS également, rappelez-vous, on en a parlé plus tôt, on peut imbriquer des styles les uns dans les autres, et ça marche également avec des Media Query. Je vais m'adresser à tout ce qu'il se passe sur des écrans et puis je vais limiter à une largeur écran minimum, donc « mid-width= », je vais déjà faire mon bloc de code, car mid-width= quoi ? Eh bien, cela va être égal à l'une des valeurs stockée dans ma map. Exemple, si je veux faire un point d'arrêt pour les tablettes portrait, c'est-à-dire pour la valeur 768px, je vais devoir aller rechercher cette valeur-là, c'est-à-dire la valeur qui correspond à la clé tablette portrait, dans la map BreakPoints. Comment puis-je faire ce genre de choses ? Eh bien, dans la documentation de SASS, vous allez voir qu'il y a plein de fonctions pour manipuler ces maps. Vous n'êtes pas surpris, n'est-ce pas ? Au passage, j'ai des fonctions pour manipuler des listes, et regardez toutes les fonctions de liste, ça marche aussi avec des maps. Eh bien oui, car une map est un type de liste particulier. Penchons-nous sur les fonctions du map et la première s'appelle map-get, et ça me permet de me renvoyer la valeur qui correspond à une clé particulière au sein d'une map. Ça sonne bien, alors comment ça marche, map-get ? J'ai besoin de passer à cette fonction deux paramètres. La map dans laquelle j'ai envie d'aller rechercher des données et la clé qui correspond à la donnée que j'ai envie de rechercher. Dans mon cas, je dois rechercher dans Breakpoints la clé tablet-portrait et on va me renvoyer la valeur qui correspond à cette clé. On va essayer de voir si ça fonctionne. Je vais prendre map-get. J'ai besoin de deux paramètres : le premier, c'est le nom de la map dans laquelle je veux faire une recherche, je fais copier-coller pour éviter les fautes de frappe, et la seconde valeur sera tablet-portrait, alors c'est une chaîne de caractères. Je fais tablet-portrait et je vais de nouveau copier-coller. Là, je vais rechercher la valeur 768px, qu'est-ce que je veux faire avec ça ? Eh bien je veux faire un max-width de cette valeur-là, donc je vais re-copier et coller ceci. Voilà. Il ne râle plus dans le fond, donc je n'ai plus d'erreurs, c'est maintenant que je ne dois pas en avoir, si j'en ai en cours de frappe, normal, les fonctions ne sont pas terminées. Allons voir ce que ça donne au niveau de la feuille de style compilée. Je vais voir au niveau de Styles.css, bien regarder ce qu'il se passe au niveau de mon Wrapper, j'ai bel et bien été créer cette Media Query, et vous voyez que j'ai été rechercher cette valeur de 768px à l'intérieur de ma map. Ça veut dire quoi, au niveau de mon site ? Regardez, ça veut dire que si ma largeur d'écran est inférieure à 768px, mon site a une largeur de 100% et il est fluide, par contre, si ma largeur d'écran est égale ou supérieure à 768px, mon site à une largeur fixe de 768px. On peut aller encore un peu plus loin, avec ces maps. Puisque si je recharge mon fichier Variables.scss, regardez, j'ai plein de valeurs, je n'ai pas uniquement tablet-portrait. Je vais pouvoir boucler autour de ces maps, comme on l'a fait dans la vidéo précédente avec la directive Each, donc je vais faire la même chose : @each. Je vais dire, pour « each breakpoint in breakpoints ». Comme ceci, et puis je vais faire un bloc de code. Breakpoints au pluriel correspond à ma map. Et la variable Breakpoint, ça sera quoi ? Ce que je vais écrire dans cette boucle va être exécuté plusieurs fois. Ça va être exécuté combien de fois ? Dans mon cas, une fois pour « phone », une fois pour « phone-wide », une fois pour « tablet-portrait », etc. La variable Breakpoint sera égale à l'ensemble clé-valeur. « Phone: 360px » à la première itération de la boucle. À la deuxième itération de la boucle, « phone-wide: 480px ». À la troisième itération de la boucle, « tablet-portait 768px ». C'est bien. Mais peut mieux faire. Ce qui m'intéresse n'est pas d'avoir l'ensemble de ces deux éléments, mais de pouvoir accéder à ces éléments de manière séparée. Regardez ce que j'ai fait au niveau de ma boucle. Je vais tout simplement définir une deuxième variable, je vais l'appeler Value, par exemple. Donc la première variable Breakpoint sera égale à la clé et la deuxième variable Value sera égale, chaque fois, à la valeur qui correspond. Voilà la pièce du puzzle qui me manquait. Je peux maintenant faire ma Media Query, comme ceci, adressé à tout ce qu'il se passe sur un écran, rechercher « min-width ». Devra être égal à ma variable Value et, comme je suis dans une boucle, Value sera à chaque fois égale à quelque chose de différent. À chaque itération de la boucle. Qu'est-ce que je vais faire dans ma Media Query ? Un « max-width » de Value. Je sauvegarde, je n'ai pas d'erreur, allons voir la feuille de style compilée. Ici, regardez, j'ai généré un tas de Media Query pour mon Wrapper, une par élément qu'il y avait dans ma map. J'ai à chaque fois été recherché la valeur qui correspondait à l'itération de la boucle sous laquelle j'étais et qu'est-ce que ça donne au niveau de mon navigateur ? Ça me donne un site réactif avec plein de points d'arrêt. Les points d'arrêt les plus petits, je ne peux pas aller plus loin. Mais si je pouvoir descendre en dessous d'une largeur de 360px pour mon écran, vous verriez que mon site serait d'une largeur de 100%, c'est-à-dire complètement fluide. Voilà un bref aperçu de la puissance de ces maps, croyez moi, on peut encore faire plein de choses intéressantes avec tout ça. Mais nous allons en rester là, dans le cadre de cette formation sur les essentiels de SASS.

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 !