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

Compiler Sass dans son éditeur de code

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Brackets-Sass est une extension permettant de compiler du code Sass directement dans l'éditeur de code Brackets. Voyez comment installer et utiliser cette extension.

Transcription

De nombreux éditeurs de code pour ne pas dire tous, proposent un système d'extension ou de plugin, permettant d'ajouter certaines fonctionnalités qui ne seraient pas présentes dans le programme de base. Vous allez trouvez de nombreux plugins et extensions qui vont vous permettre d'installer Sass dans votre éditeur de code favori. Ces extensions vont non seulement s'occuper de le compilation d'un fichier Sass en fichier CSS, mais elles vont également installer une série d'aide au développement, comme des consoles de débuggage ou des aides à la saisie de code. Je suis ici, sur une page Web qui vous propose un guide d'installation de Sass dans « Sublime Text 3 ». Si vous utilisez cet éditeur, vous trouverez sur cette page de quoi installer Sass dans votre éditeur de code. Si vous utilisez « notepad-plus-plus », il existe également plusieurs projets, notamment, celui-ci sur GitHub qui vous permet d'installer Sass dans votre éditeur, mais, nous, nous utilisons « Brackets ». Figurez-vous qu'il existe, également, une extension Brackets qui va vous permettre d'installer Sass directement dans votre éditeur de code. Allons-y, je vais retourner dans Brackets ici, je suis toujours sur la même page HTML, simplement comparé à la vidéo précédente, j'ai de nouveau supprimé ici, les fichiers CSS qu'on avait générés lors de la vidéo précédente, je suis revenu à la situation initiale. Alors, au niveau de Brackets, je vais dans le menu « Fichiers » pour aller chercher ici, le « Gestionnaire d'extensions » qui va me donner une liste des extensions disponibles, la voilà et également ici, une liste des extensions installées, vous voyez que pour le moment, je n'ai aucune extension installée ici, dans Brackets. Dans les extensions disponibles, je vais faire une petite recherche sur Sass, comme ceci et vous trouvez pleins d’extensions, alors, celle que j'ai choisie d'installer, c'est la seconde ici, dans la liste qui s'appelle « Brackets SASS ». Cette extension, elle va se charger de compiler les codes Sass en codes CSS mais directement, dans Brackets dans mon éditeur de code. Allons-y, on va l'installer. Voilà, ça va prendre un petit peu de temps. L'installation de cette extension a réussi, je peux fermer maintenant, mon gestionnaire d'extensions. Je vais vous montrer que cette extension, elle a été installée, elle fonctionne. La preuve, si j'ouvre ici mon application Sass, je vais ouvrir mon fichier « styles.scss ». Je vais apporté une petite modification, par exemple, je vais retirer ici le ; et le remettre, ce qui me donne l'occasion maintenant de sauvegarder mon fichier avec le raccourci clavier commande S sur Mac ou Ctrl+S sur Windows. Et au moment de la sauvegarde, vous remarquez ici, juste à côté du fichier styles.scss, j'ai effectivement compilé, créé un fichier « styles.scss », voyez que c'est venu tout seul, avec son fichier compagnon « styles.css.map », nous reparlerons d'ailleurs de ces fichiers map, plus tard dans ce cours. Et vous voyez que le fichier CSS a bien été compilé, c'est du CSS que vous pouvez lire, vous voyez également qu'il y a des commentaires qui ont été ajoutés et qui vous permettent de débugguer votre application puisque ça fait référence, ici, au fichier « scss » et à la ligne dans ce fichier dans laquelle vous trouvez les instructions qui ont généré ce code CSS particulier. Voilà, tout ça fonctionne très bien, cela dit, moi, j'ai envie de compiler mes fichiers CSS dans le dossier CSS de mon site. Je vais devoir un petit peu, modifier les options de cette extension et c'est ce que je vous propose de voir dans la vidéo suivante.

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 !