L'essentiel de Sass

Compiler Sass en lignes de commande

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette séquence, vous apprendrez à compiler du code Sass en code CSS à l'aide de lignes de commande.

Transcription

Maintenant que nous avons installé Sass en ligne de commande, nous allons pouvoir nous servir de cette fameuse ligne de commande pour compiler nos fichiers Sass en feuille de style CSS. Justement, je me trouve ici dans un fichier HTML qui fait référence en ligne 6, vous le voyez, à une feuille de style CSS qui s'appelle « styles.css » et qui se situe dans le dossier CSS de ce site. Si on va voir dans le dossier CSS de ce site, vous constatez qu'il n'y a rien du tout, ce dossier est complètement vide, et donc, ce fichier « styles.css », il n'existe pas et cette balise « link » qui a ici, elle est complètement inopérante. Alors, heureusement pour moi, j'ai également dans mon site un fichier, un dossier, pardon, Sass et dans ce dossier Sass, nous avons un fichier qui s'appelle « styles.css » et c'est lui que je vais maintenant compiler pour générer le fichier « styles.css » dont j'ai besoin ici. Alors, pour réaliser cette opération de compilation, je vais me retourner au niveau de ma ligne de commande. Et la première chose que je vais faire avec cette ligne de commande c'est de me déplacer là où se trouve mon site. Alors, ce n'est pas obligé, mais ce sera beaucoup plus simple, vous allez voir. Pour me déplacer je vais utiliser la commande CD qui signifie « change directory » et c'est la même commande sur Linux, sur Mac ou sur Windows. Et en ce qui me concerne, mon site se trouve au niveau de mon dossier « Documents » et là-dedans j'ai un sous-dossier qui s'appelle Sass et c'est là que se trouve mon site, voilà. Alors, je vais faire un petit « ls » si vous êtes sur Mac ou sur Linux, « ls » pour liste. Si vous êtes sur Windows, vous devrez utiliser la commande « dire » plutôt que la commande « ls » pour lister le contenu de l'endroit où on se trouve. Alors, là où je me trouve, je trouve un dossier CSS, je trouve un dossier IMG, un fichier « index.html », également un dossier Sass qui se trouve ici. Vous avez toute la hiérarchie de votre site, nous sommes bien au même endroit, au bon endroit. Je vais faire un petit clic pour effacer mon affichage, et puis pour compiler maintenant ce fichier j'ai besoin de la commande Sass, comme ceci. Et cette commande, elle va avoir besoin d'une première information qui est la source, c'est-à-dire le fichier Sass où « scss » a compilé. En ce qui me concerne, dans mon site, j'ai un dossier Sass et à l'intérieur de ce dossier Sass j'ai un fichier qui s'appelle « styles.css », c'est celui qui est ici au niveau de la colonne de gauche de Brackets. Alors si je m'arrête là et que je valide par « Enter », vous voyez que la compilation a lieu mais le résultat de cette compilation, c'est-à-dire le code CSS, il est envoyé dans la console et ça, je ne vais pas vraiment en faire quelque chose d'intéressant, j'ai plutôt envie que cette compilation ait lieu dans un fichier. Je vais refaire ici ma commande « Clear » pour effacer mon affichage. Rappelez ma dernière commande en appuyant sur la flèche du haut, la dernière c'était « Clear », l'avant-dernière c'était celle-ci, donc, reflèche du haut. En plus de spécifier ici un fichier source, je vais également spécifier un fichier de sortie. Pour ça je vais utiliser les deux points. Donc, en sortie je veux que dans le dossier CSS de mon site je crée un fichier qui s'appellera « styles.css » comme ceci. Si maintenant je valide cette commande, vous voyez qu'il n'y a plus rien qui se passe au niveau de la console, par contre, au niveau de mon dossier CSS vous constatez que j'ai deux fichiers qui ont été générés et l'un des deux fichiers, c'est ce fameux « styles.css » dont j'avais besoin. Alors, allons voir ce fichier, si vous le voulez bien, c'est un fichier qui fait pour le moment 119 lignes de codes et c'est in fichier CSS tout à fait classique. Maintenant, si on regarde un petit peu comment ce fichier a été généré, prenons ce bloc-ci, par exemple, prenons le style « main », alors, ce style « main », vous voyez qu'il se termine ici, à l'accolade qui se termine ici, en ligne 103. Mais après j'ai un deuxième style qui s'appelle « main h1 », et vous voyez que ce style, il est indenté, il y a quelques espaces ici, au début, même chose au niveau du style « main p » qui se trouve ici, comme pour nous indiquer finalement que ces deux styles-là influencent des choses, des références dans HTML qui sont en dessous de cet élément « main ». Donc, ça, c'est une syntaxe qu'on appelle la syntaxe imbriquée. Vous allez voir que dans Sass on a d'autres styles de sortie possibles. Alors, pour pouvoir expérimenter avec ces styles de sortie, je vais rappeler ma dernière commande. Je vais rajouter un petite option : pour ça je vais revenir ici, juste après le nom de la commande Sass, et l'option que j'ai envie d'ajouter, c'est l'option « style ». Voilà, et Sass nous propose quatre styles différents. Le style par défaut s'appelle « nested » en anglais, imbriqué, c'est ce que vous venez de voir. Alors, un autre style disponible, c'est le style « expanded », comme ceci. Si je tape maintenant cette commande-là, vous voyez que c'est la même commande que tout à l'heure, j'ai simplement rajouté « --style expanded ». Voilà, vous voyez qu'on regénère ici un fichier CSS qui fait maintenant combien de lignes, il fait maintenant 150 lignes, il est un petit peu plus long que tout à l'heure, mais vous voyez que je n'ai plus cette indentation du code, vous voyez également qu'il y a des lgnes vides entre certains styles, et les commentaires ont été maintenus dans le fichier généré. Alors, toujours un autre style disponible, après « nested » et « expanded », Sass nous propose également, je vais changer ici « expanded » en « compact », voila, le style « compact », vous voyez que la feuille de style CSS a été regénéré, et cette fois-ci, elle ne fait plus que 42 lignes. Si je prends mon style « main » qui se trouve ici, ce style, il a été généré de manière tout à fait compact et il ne prend qu'une seule ligne de code, c'est-à-dire que les styles CSS se situent sur une ligne de code chacun, mais vous voyez qu'on a quand même gardé ici des espaces entre certains styles, ainsi que les commentaires qui sont toujours affichés dans la sortie. Le dernier style, on en a déjà un petit peu parlé plus tôt, dans cette formation, mais c'est un style qui s'appelle « compressed », et le style « compressed » c'est le style minifié, vous voyez ici la feuille de style qui a été regénérée. Là je n'ai plus les commentaires ici, dans ma sortie, je n'ai plus non plus d'espaces, ni de soulignes, vous voyez que l'ensemble de ma feuille de style CSS est maintenant une et une seule ligne de code, voici votre fichier minifié. Autre option que j'ai envie de vous montrer, si je vais voir, par exemple, dans mon fichier « variable » ici, j'ai toujours ici une variable qui est cette couleur un peu violette, comme ça je vais chenger cette couleur, je vais prendre une autre couleur, par exemple, je vais reprendre ici un jaune assez foncé, comme ceci. Je vais sauvegarder mon fichier CSS, mais ma feuille de style n'a pas changé, regardez, je vais essayer de retrouver ici mon dégradé, le voici. Voyez que ce dégradé utilise toujours l'ancienne couleur, tout simplement parce que mon fichier n'a pas été automatiquement regénéré. Pour le regénérer je vais devoir rappeler dans le terminal ma dernière commande et refaire une compilation. Maintenant, je pense, vous avez vu, ça a changé ici, et au niveau de ma feuille de style, maintenant le dégradé utilise bien la nouvelle couleur. Alors, l'autre option que j'ai envie de vous montrer, je vais rappeler toujours cette dernière commande et je vais rajouter une petite option ici, après « style compressed », je vais rajouter « --watch », « watch » ça veut dire « regarder » en anglais. Quand je fais ça, vous voyez qu'il y a la console « Sass is watching for changes », « Sass attend les changements ». Regardez ce que je vais faire, je vais revenir ici, dans mon fichier « variables.scss », rechanger ici la valeur de cette couleur, je prends, par exemple ici ce bleu, je sauvegarde, et regardez ce qui se passe au niveau de la console, le changement a été détecté, le changement dans le fichier « variables.scss » a été détecté et le fichier CSS a maintenant été automatiquement recompilé. Donc, si je vais regarder mon fichier CSS et que je reprends ici mon dégradé, vous voyez qu'il utilise bien la nouvelle couleur. Alors, pour arrêter cette commande je vais utiliser le Ctrl C. Et puis dernière chose que je vais vous montrer dans la ligne de commande, c'est « sass -h », « h » pour « help ». Et ça, ça va tout simplement vous imprimer dans la console toutes les options disponibles pour cette commande Sass. Nous avons parlé de l'option « style » avec les quatre styles ici qui sont expliqués. Nous avons parlé de l'option « watch » qui se trouve ici, mais vous voyez qu'il y a plein d'autres options qui existent pour compiler vos fichiers Sass en fichiers CSS. Voilà, dans cette vidéo, vous avez appris à compiler vos fichiers Sass en fichiers CSS à l'aide de la ligne de commande.

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 !