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 avec une application externe

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez un grand nombre d'applications incluant la librairie LibSass. Vous aurez la possibilité de compiler du code Sass avec d'autres applications.

Transcription

Rappelez –vous plutôt dans ce chapitre quand nous avions discuté l’installation de Sass sur votre ordinateur, et bien je vous avais dit qu’il y avait deux grandes méthodes pour installer Sass. Alors la première famille de méthode, c’est via la ligne de commande, et ça c'est quelque chose que nous avons déjà expérimenté plustôt dans ce chapitre. Alors il y a aussi la possibilité d’installer des applications qui embarquent Sass et c’est ça que je vous propose d’expérimenter dans cette vidéo. Alors si je descends un petit peu dans cette page, vous allez avoir ici une liste non exhaustive d’applications qui embarquent Sass. Alors je suppose que vous avez compris ce qui se passe derrière. Ce sont des applications qui embarquent une version de « LibSass » ou une version de toute autre forme d’un compilateur Sass. Donc en installant ces applications vous installez également un compilateur Sass. Alors celle que j’ai choisie de vous montrer dans cette vidéo, c'est « Koala ». pourquoi j’ai choisi « Koala » ? Parce que c’est la seule application entièrement open source de cette liste qui est disponible pour les trois grands systèmes, donc Mac, Windows et Linux. Alors j’ai déjà téléchargé Koala. Donc voici à quoi ça ressemble. Donc Koala c’est simplement, vous voyez, une petite interface ou on me dit, Drag and drop a folder to add project, donc glissez et déposez un dossier pour ajouter un projet. Alors quel dossier vais-je glisser? Et bien sur mon disque dur, rappelez –vous, j’ai un dossier qui s’appelle Sass, et c’est dans ce dossier-là que mon site se trouve. Vous retrouver ici le fichier index.html, le dossier Sass avec mes fichier CSS, si j’ai encore une image, parce que j’ai besoin d’une image sur ma page. Et puis j’ai ce dossier CSS qui de nouveau est complètement vide, puisque j’ai de nouveau supprimé les fichiers CSS qu’on avait compilé lors des vidéos précédentes. Alors je vais revenir sur « Koala », voilà, et je vais prendre ce dossier Sass, donc le dossier racine de mon site que je vais glisser ici sur cette interface. Et vous voyez que « Koala » va analyser le dossier racine de mon site et va repérer deux fichiers Sass qui peuvent potentiellement être compilés. Alors il y a reset.scss et puis il y a notre fameux styles.scss. Alors, moi je sais que styles va importer reset, donc je n’ai pas besoin vraiment, de compiler reset en tant que tel, donc ce que je peux faire, c'est cliquer dessus , désactiver ici l’auto compilation, vous voyez que du coup, il est grisé, donc il ne fait plus vraiment parti de ce qui sera compilé automatiquement et puis en fait comme j’ai vraiment pas besoin de ce fichier du tout dans mon application je peux tout simplement faire un clic droit ici sur ce fichier et carrément le retirer puisqu’il sera appelé dans « styles.scss » , je n’ai pas besoin de ça ici au niveau de mon application. Qu’est–ce que je peux faire avec « Koala » et « styles.scss » ? Quand je clique sur ce fichier, vous voyer que j’ai toute une série d’options qui arrive ici sur le côté. Est-ce que je veux auto compiler ceux–ci ou pas? C'est-à-dire est-ce que je veux que « Koala » automatiquement recompile une nouvelle version du fichier css à chaque fois que je sauvegarde « styles.scss » ? Vous avez également d’autres options dont on a déjà parlé. Est –ce que je veux générer une source map? Est –ce que je veux générer des commentaires dans mon fichier CSS compilé ? Et puis quel est le style de sortie que je veux ? Je vais de nouveau ici choisir expended et puis regardez, je peux directement cliquer sur compile ici et puis au bout d’un moment sucess vous voyez que ce fichier a été compilé. Alors il a été compilé, on va aller voir ce qui se passe. Donc vous voyez ici que dans le dossier CSS de mon site, ce dossier css n’est plus vide, j’ai maintenant mon fichier « styles.scss » qui a été généré avec son fichier map qui l’accompagne. Alors vous remarquez que j’ai également le dossier reset ici tout simplement parce qu'avant de supprimer reset de l’application « Koala », il avait déjà le temps de le générer une première fois, donc je vais tout simplement supprimer ceux –ci. Voilà. Alors j’ai également demandé à « Koala » d’auto compiler ces fichiers à chaque fois que je sauvegarde quelque chose. Alors on va aller vérifier si ça fonctionne, donc je vais voir au niveau de mon éditeur de code. Je vais aller voir mon fichier CSS qui était généré. Vous voyez que c’est bien un fichier qu’utilise la syntaxe expendad et que j’ai ces commentaires qui viennent ici au niveau de chaque ligne de CSS. Alors au niveau du header j’ai un dégradé qu’utilise, vous le voyez, la couleur bleu pour générer donc le dégradé. Pourquoi le bleu? Parce que dans le variables.scss j’ai ici une variable qui définit cette couleur bleu. Alors je vais changer la couleur, je prends, par exemple, ici de nouveau du rose assez foncé. Voilà je vais sauvegarder ce fichier variables.scss et comme ce fichier est en fait importé à l’intérieur de styles.scss, vous le voyez ici, « Koala » normalement va recompiler une nouvelle version d'un fichier CSS. On va aller voir si ça a marché. Vous voyez maintenant que le dégradé utilise ma nouvelle couleur. Et donc vous avez appris dans cette vidéo à compiler vos codes SCSS en CSS via une application externe. Ici on utilisait « Koala », mais les autres applications fonctionnent toutes plus ou moins sur le même modèle.

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 !