Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Sass

Organiser son application Sass

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La directive @import permet d'importer les règles d'autres feuilles de style. Découvrez de quelle manière Sass étend l'utilisation de cette directive et comment en tirer parti dans votre application Sass.

Transcription

Avec toutes les manipulations que nous avons déjà faites dans ce chapitre, notre fichier « Sass » commence à s'allonger dangereusement. Heureusement pour nous, « Sass » nous permet d'organiser les fichiers de notre application, en modifiant le comportement de la directive « @import » du « CSS ». C'est ce que je vous propose d'explorer, dans cette vidéo. Pour cela, je vais d'abord créer un nouveau dossier dans mon application. Un dossier que je vais appeler, par exemple, « scss ». Et, dans ce dossier, je vais créer un nouveau fichier. Mais attention au nom de ce nouveau fichier. En effet, le fichier que je vais créer n'est pas appelé à être, directement, compilé en une feuille de style « CSS ». C'est un fichier que je vais, en fait, importer dans un autre fichier, dans « styles.scss ». Mais c'est cet autre fichier qui sera compilé en feuilles de style « CSS ». Donc, c'est « styles.scss » que je vais compiler et cela va devenir « styles.css ». Si je veux que cela fonctionne convenablement, c'est ce que l'on appelle une « partielle », dans « Sass », je dois respecter une convention de nommage, pour mes fichiers. Il faut que mes fichiers commencent par un « _ », puis j'ai le nom de mon fichier, par exemple, « _variables », puis l'extension « .scss ». Voilà mon nouveau fichier « _variables.scss ». Alors, vous remarquez que l'extension « Brackets », qui est chargée de compiler mes fichiers « Sass » en « CSS », n'a pas créé, ici, un fichier « _variables.css » comme elle avait créé un fichier « styles.css ». Vous vous rappelez, quand j'avais créé « styles.scss », automatiquement, mon extension avait créé « styles.css ». Cela n'a pas été le cas, ici, parce que j'ai respecté cette convention de nommage, le nom de mon fichier commence par « _ », donc, le compilateur « Sass » sait que ce fichier ne doit pas être directement compilé. Maintenant, je vais retourner dans mon fichier principal, je vais prendre toutes mes variables et je vais les déplacer dans mon nouveau fichier. Donc, couper, « Ctrl x » ou « commande x », dans mon fichier « _variables.scss », coller « Ctrl v » ou « commande v ». Je sauvegarde ceci et je retourne dans mon fichier « scss ». Évidemment, si je modifie et sauvegarde mon fichier « styles.css », maintenant, je vais avoir une erreur. Vous voyez, ici, le petit avertissement, me dit que mes variables ne sont pas définies. Effectivement, j'ai déplacé mes variables dans « _variables.scss ». La seconde partie du processus, c'est de réimporter ce fichier à l'intérieur de « styles.scss ». C'est là qu'intervient la directive « @import», comme ceci. C'est une directive qui n'est pas propre à « Sass », c'est une directive qui existe dans le langage « Css » classique. Vous allez voir, ici, que je vais importer dans le dossier « scss » que j'ai créé, le fichier « variables ». Là, vous remarquez quelque chose de particulier, c'est que je ne spécifie ni l'extension «.scss », ni le « _» qui se trouve devant le nom de mon fichier. Simplement, comme je respecte les conventions de nommage, comme ceci est une « partielle » en « Sass ». « Sass » devrait retrouver « ses petits jeunes », la preuve, si je sauvegarde ceci, regardez, mon avertissement a disparu, c'est à nouveau un « v vert ». Aucun problème détecté. Félicitations ! Merci, compilateur « Sass ». Vous voyez que tout se passe correctement. Je ne vais pas m'arrêter en si bon chemin je vais créer une autre « partielle ». Je vais appeler cela « _ main.scss », avec le « _ », bien sûr, et puis, je vais prendre ces deux styles, ici, je vais les couper et les recoller dans mon fichier « main ». Ensuite, je vais importer « @import », cela se trouve dans le dossier « .scss », cela s'appelle « _ main », de nouveau, je ne spécifie ni le « _ », ni l'extension « .scss », et quand je sauvegarde, regardez, toujours aucun problème, puisque ces fichiers sont réimportés. Je vais faire la même chose pour les autres styles qui sont ici. Mais je ne vais pas vous imposer de me regarder faire des couper-coller, pendant dix minutes. Donc, je vous retrouve dans quelques instants, quand tout cela sera terminé. Voilà, c'est terminé. J'ai réorganisé mon application « Sass ». J'ai créé un fichier « _variables.scss » avec mes variables. J'ai créé « main.scss », j'ai créé « _header » et « _nav », j'ai, également, créé « _mainContent » et « _footer ». Vous remarquez que tous ces fichiers contiennent très peu de codes. C'est beaucoup plus facile à manipuler quand les fichiers ne contiennent pas un grand nombre de lignes de code. Vous remarquez, également, que le nom de ces fichiers est important, puisque, simplement en regardant le nom du fichier, j'ai une idée de ce à quoi cela fait référence. Je vais, très facilement, pouvoir m'y retrouver dans l'application et retrouver, beaucoup plus facilement, la ligne de code que je désire modifier ou débugger. Au niveau de mon fichier principal, « styles.scss », il n'y a plus rien dedans, je me contente, simplement, de faire des imports, d'importer les autres fichiers. Ce qui est intéressant de remarquer, c'est qu'au niveau de la feuille de style compilée, rien a changé. La feuille de « styles.css » est toujours la même. C'est là que le comportement de la directive « @import » diffère un peu en « Sass », dans « CSS ». Dans le « Sass », que va faire la directive « @import » ? « Sass » va d'abord, réimporter toute cette partielle, donc, va reformer le fichier « styles.scss » complet, avant de le compiler en « styles.css ». Donc, cela ne change, finalement, rien du tout, au niveau de « styles.css ». Simplement, j'ai une application qui est mieux organisée. J'ai des fichiers dans lesquels il est plus facile de s'y retrouver. Parce que, vous le voyez ici, à droite, ces fichiers sont beaucoup plus petits, ils contiennent beaucoup moins de lignes de code qu'avant. Et, c'est comme cela que l'on organise une application « 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 !