L'essentiel de Sass

Déboguer le code Sass

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Tirez parti de la fonction du fichier .map dans le processus d'inspection et de débogage de votre code Sass.

Transcription

Dans ce chapitre, vous avez appris à installer Sass et à compiler vos feuilles de style, en utilisant différents outils et diffèrentes techniques. Alors, avant de passer à la suite, j'aimerais vous montrer une dernière petite chose dans ce chapitre et cette dernière petite chose, c'est l'utilisation de ce fichier « styles.css.map » . Alors, ce fichier, il accompagne le fichier CSS, il est également généré par Sass, mais on ne sait toujours pas à quoi il sert ce fichier. On va aller voir ce qu'il y a dedans. En regardant ce qui est ci-dedans qu'on va comprendre à quoi ça sert, vous voyez que c'est des codes assez cabalistiques, on ne sait pas lire ce genre de chose. Alors, pour vous montrer à quoi il sert, j'utilise un autre petit truc, j'ai tout simplement ici, le renommé, je vais l'appeler « styles.css.old », par exemple. Et donc, ce fichier n'a plus le nom attendu par l'application, ça, c'est donc, je l'ai en fait désactivé, si vous voulez. Alors, pour comprendre à quoi ça sert, je vais retourner ici, au niveau de mon navigateur. Voici la page web avec laquelle nous sommes en train de travailler. Je vais la rafraîchir pour être bien certain d'avoir la dernière version ici, chargée dans le navigateur. Alors, vous savez sans doute, quand on développe un site, on a des outils très intéressants dans le navigateur et spécialement ici, dans Google Chrome, on a une console d'inspection qui est spécialement intéressant, donc, je vais faire un clic droit ici, dans le titre du site, par exemple. Je vais demander à Chrome d'inspecter ceci. Donc, vous voyez dans le fond, j'ai les outils de développement qui vont s'ouvrir avec la possibilité d'aller visionner les différents éléments de ma page web. Alors ici, quand je suis sur ce titre de niveau 1, vous voyez qu'il se met en couleur également au-dessus, vous le voyez qu'il est ici en bleu. Et puis surtout, dans la partie droite de ma console, j'ai la liste ici, des styles CSS, qui influencent donc cet élément de l'HTML que j'ai sélectionné à gauche. Mais vous remarquez peut-être que cette console fait référence à des styles CSS qui se trouvent dans le fichier « styles.css » en ligne en 139. C'est là que se trouvent les styles, donc CSS, qui influencent la mise en forme de cet élément h1. Alors, on va aller voir ce que ça donne. Voilà, donc dans « styles.css » en ligne 139 et bien effectivement, voici le style « header h1 », donc, il met en forme ce titre de niveau 1 sur ma page. Oui, mais cette feuille de style CSS, ce n'est pas moi qui l'ai écrite, donc, si je veux corriger une erreur dans ce style, ce n'est pas dans la feuille de style CSS que je dois aller, mais c'est dans le fichier Sass qui a permis de générer ce style. Alors, heureusement ici, j'ai mes commentaires et donc, le fichier Sass qui a permis de générer ce style, c'est « header.scss » et plus précisement la ligne 10 de « header.scss ». On va jeter un petit coup d'œil, donc, dans « header.scss » et bien, effectivement, c'est là que j'ai le style qui définit h1, qui se trouve dans le header. Alors, maintenant qu'on a vu cela, je vais de nouveau donner le bon nom à ce fichier, donc, je vais le renommer dans l'autre sens : « styles.css.map ». Voilà, donc il a de nouveau le nom attendu par l'application Sass. Je vais retourner dans mon navigateur, rafraîchir de nouveau ma page. Regardez maintenant ce qui se passe quand je sélectionne, donc toujours, cet élément h1 dans le header. Dans la partie droite de mes outils de développement, le style est toujours ici, mais maintenant, je fais référence directement au fichier CSS, qui a généré ce style et non plus au fichier CSS, donc, qui a été compilé. Donc, vous voyez ici, je fais référence à « header.scss » en ligne 10 et je fais directement référence à « header.scss » en ligne 10. C'est là que je dois aller écrire des choses, si je veux débugger ce style CSS ou lui rajouter des propriétés. Et donc, voilà à quoi sert ce fichier « styles.css.map », ça sert tout simplement à faire la correspondance entre ce qui a été généré dans le fichier CSS et le fichier Sass qui a généré chacun de ces styles et ça vous permet d'avoir directement accès à ce site dans la console. C'est très précieux, bien sûr, quand vous développez votre application. Donc, voilà à quoi sert ce fichier map. Alors, bien évidemment, quand vous aurez terminé votre application vous retournerez ici dans votre « brackets.json » et vous irez mettre ici, une petite propriété supplémentaire, qui va tout simplement ne plus générer ce fichier map, puisque vous en avez besoin pendant le développement de votre application, mais une fois que cette application est en production, on n'a pas forcément besoin de ce fichier map sur le serveur.

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 !