• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 2/24/20

Installez Sass sur votre machine

Log in or subscribe for free to enjoy all this course has to offer!

Grâce au système 7-1, nous avons séparé notre Sass en morceaux logiques ce qui facilite la tâche pour trouver et maintenir des éléments. Mais vous ne pouvez pas juste vous asseoir devant votre ordinateur et commencer à travailler. Pour le moment, le projet se trouve entièrement dans le cloud. Vous devez donc ouvrir un navigateur, naviguer, vous connecter, puis charger le projet. Il vous faut aussi une connexion internet pour pouvoir continuer à travailler et sauvegarder votre travail.

Téléchargez les fichiers du projet

Et si vous voulez travailler dans l’avion ? Ou quand vous n’avez qu’une connexion wifi médiocre ? Ou si vous voulez juste l’avoir dans votre ordinateur ? La solution est de télécharger tous les fichiers source et d'installer Sass sur votre machine, ce qui vous permettra de recompiler votre Sass en CSS à chaque fois que vous faites des changements.

Il existe de nombreuses manières pour installer Sass sur votre machine, nous allons en voir juste une pour des raisons de simplicité. Mais avant de commencer, vous devez transférer les fichiers du site sur votre ordinateur pour que vous ayez de quoi travailler.

Une fois que vous avez téléchargé les fichiers, il faut les extraire et les placer dans le dossier où vous voulez que votre projet soit rangé. En ce qui me concerne, j’ai un dossier nommé openclassrooms-courses  dans lequel j’ai extrait mon projet  writing-sass. Tous les fichiers pour notre site sont situés dans mon dossier  writing-sass.

Lancez VS Code et ouvrez le dossier du projet en sélectionnant “Ouvrir le dossier” (Open Folder) dans le menu Fichier :

Illustration de l'onglet open folder
L'onglet Open Folder

En allant dans votre dossier et en sélectionnant le directory de votre projet, vous verrez les fichiers du projet dans le panneau de navigation de gauche dans VS Code :

Illustration du panneau de navigation
Le panneau de navigation

 Si vous vous baladez, vous verrez que tous vos fichiers HTML, CSS et  .scss  sont bien là où ils doivent être. Notre site est désormais dans votre ordinateur ! Maintenant que votre site est sur votre ordinateur, il ne vous reste plus qu’à installer Sass.

Installez et lancez Sass en 3 étapes

1. Ouvrez une ligne de commande

Tout d’abord, il vous faut une ligne de commande pour que la magie puisse commencer. Dans VS Code, allez dans Vue, puis choisissez Terminal ou utilisez le raccourci clavier Ctrl + `:

Image montrant comment sélectionner Terminal
Sélection de Terminal

La partie inférieure de VS Code laisse désormais place à une fenêtre avec un terminal !

Image montrant la fenêtre de terminal window
Fenêtre de terminal Windows

Première étape : ouvrir une ligne de commande. Check. ✅

2. Initialiser un fichier npm package.json

Vous êtes maintenant prêt pour la deuxième étape : initialiser un fichier  npm package.json.

Euh, un quoi ? 😰

package.json est un fichier qui stocke les informations sur votre projet : nom, numéro de version, auteur, info de licence, dépendances externes, et, encore plus important, des petits bouts de code à exécuter (que nous appellerons dorénavant des scripts). Dites-vous que le  package.json  est un manuel d’utilisation pour que  npm  puisse réassembler et faire fonctionner votre site.

Créons un fichier package en tapant npm init :

npm init

La ligne de commande vous demande à présent un tas d’infos sur votre projet. Si vous taper Entrer sans remplir les champs demandés,  npm  les remplira avec la valeur par défaut affichée entre parenthèses. S’il n’y a pas de parenthèses, tapez juste Entrer et le champ sera vide :

Illustration du champ vide
Le champ est vide 

À vous de jouer, remplissez les champs comme vous le souhaitez. Ne vous inquiétez pas du repository git pour le moment. Une fois que tous les champs sont remplis, la ligne de commande vous montrera un aperçu de votre package.json et vous demandera si cela vous convient. Tapez Entrer pour accepter.

Illustration de la fenêtre de terminal
Le terminal

Un fichier   package.json  est apparu dans le panneau de navigation sur la gauche de VS Code. Cliquez dessus et regardez ce qu’on y trouve !

{
"name": "writting-sass",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Ce que vous avez là est un objet JSON contenant toutes les données que vous venez de renseigner. À mesure que vous installez des packages (ou librairies), ils apparaîtront parmi les objets dépendances, ce qui donnera; si on ajoute bootstrap par exemple :

"dependencies": {
  "bootstrap": "4.2.1",
}

OK, initialiser un package npm : validé ! ✅

Et pour finir, la troisième et dernière étape : installer Sass. Enfin ! 🙌

3. Installez Sass

Dans la ligne de commande, tapez npm install sass -g .

npm install sass -g

OK, alors on va décortiquer cette ligne de commande ensemble pour mieux la comprendre. Tout d’abord, lorsque vous tapez  npm, cela indique que vous allez exécuter une commande  npm   ; install est la commande npm que vous êtes en train d’exécuter : elle téléchargera et installera les packages indiqués. Dans le cas présent, c’est le package Sass qui sera installé, ainsi que toutes ses éventuelles dépendances. -g  s’appelle un flag (ou drapeau en français). Cela indique à nmp d’installer le package globalement, c’est-à-dire sur l’ensemble de votre machine, plutôt que de l’installer seulement pour votre projet. Vous n’aurez plus jamais à installer Sass !

Pour vérifier que vous avez bien installé Sass dans votre système, tapez  sass --version  dans le terminal :

sass --version

La ligne de commande vous répond en vous indiquant quelle version de Sass est installée. Si par malheur vous aviez fait une erreur et que Sass n’était pas installé, pas de panique vous auriez eu un message d’erreur vous indiquant que Sass n’est pas reconnu :

Illustration du message d'erreur
Le message d'erreur

Si vous voyez Sass et une version affichée, ici : Sass 3.5.1 c’est tout bon.

Troisième étape : installer Sass. Effectuée ! ✅

🎉🎉🎉

Comment on allume ce truc ?

Okay. Vous avez installé Sass, maintenant comment est-ce qu’on le fait fonctionner ?

Vous avez installé Sass via  npm, que vous pouvez utiliser pour faire fonctionner Sass et compiler votre CSS. Si on revient au fichier  package.json créé il y a peu de temps, vous avez peut-être remarqué un objet “scripts” :

{
"name": "writting-sass",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

C’est ici que vous allez mettre votre script pour pouvoir faire fonctionner Sass. Nous n’allons pas faire de test, vous pouvez donc vous débarrasser du script de test et le remplacer par un nouveau script : sass, suivi de deux points et d’une paire de guillemets :

{
"name": "writting-sass",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "sass": ""
},
"author": "",
"license": "ISC",
}

Vous avez maintenant défini un script  npm  nommé sass, mais il est vide. Si vous essayez de le faire fonctionner, il ne se passera rien. On va y remédier ! Entre les guillemets, tapez ceci :  sass --watch ./sass/main.scss:./css/style.css

{
"name": "writting-sass",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "sass": "sass --watch ./sass/main.scss:./css/style.css"
},
"author": "",
"license": "ISC",
}

Une suite de points et de tirets incompréhensibles... Qu'est-ce que ça veut dire ?

Pas de panique ! Détaillons ensemble ce que vous venez d’écrire :

  • sass  indique à  npm  où trouver le script à exécuter ;

  • --watch  (observer, en anglais) est un flag (ou une option) que npm utilise pour trouver d’éventuels changements dans le fichier Sass. En d’autres termes, il observe si un changement opère et s’il en voit, il recompilera et mettra à jour le fichier CSS. Sans le flag watch, il vous faudrait faire tourner le script à chaque fois que vous sauvegardez votre fichier. Mais grâce à lui, la mise à jour se fera automatiquement tant que le script tourne dans votre terminal ;

  • ./sass/main.scss  indique au script situé dans node-sass où trouver le fichier Sass à compiler ;

  •  les deux points séparent le chemin source du chemin de destination ;

  • ./css/style.css  indique au script l’endroit où compiler le CSS et comment le nommer.

Vous avez écrit un script, maintenant il est l’heure d’enregistrer le fichier  package.json et de lancer Sass ! 🚀

Dans le terminal, tapez “npm run sass” :

npm run sass

C’est exactement comme la fois où vous avez initialisé le fichier package : npm indique à la ligne de commande que vous voulez exécuter une commande npm. La commande, c’est run. Et sass, c’est le nom du script que vous voulez exécuter.

Juste après, la ligne de commande indique le contenu du script, puis compile votre  main.scss en CSS :

Illustration du code qui compile
Le code compile

Ça y est, vous êtes fin prêt !

Tant que vous n’interrompez pas le processus, soit en tapant Ctrl+C dans le terminal, soit en cliquant sur la corbeille, le script attendra et sera à l'affût de tout changement à compiler. On va vérifier ça en changeant la couleur dans l’une de nos variables, puis en sauvegardant.

Si tout a fonctionné comme prévu, la ligne de commande va repérer le changement puis nous indiquera qu’elle a recompilé le CSS en vert :

Illustration du code recompilé
Le code recompilé

Ça marche !

Mais si vous faites une erreur, par exemple en tapant une faute de frappe intentionnelle, Sass enverra une erreur à la ligne de commande :

Illustration d'une erreur dans le code
Une erreur dans le code

Oooooops on dirait qu’on a oublié le “y” de $colour-primary . Hop, on corrige !

Illustration du code qui compile à nouveau
Le code qui compile à nouveau

Sass voit que nous avons modifié le fichier et tente de le recompiler. Cette fois-ci, nous avons corrigé la faute de frappe et voyons un message vert de victoire. Vous avez maintenant le site et Sass sur votre ordinateur, vous pouvez donc travailler avec ou sans connexion, où que vous soyez !

Découvrez les différents modes de compilation

Ouvrez votre feuille style.css fraîchement compilée :

.form {
width: 100%;
padding-bottom: 1.5rem; }
.form__heading {
  width: 100%;
  color: #fff;
  text-shadow: 0.55rem 0.55rem #11af82;
  background: #15DEA5;
  line-height: 5rem;
  padding: 1.5rem; }
.form__field label {
  color: #D6FFF5;
  display: block;
  font-size: 2rem;
  line-height: 2rem;
  padding-top: 1.5rem; }
.form__field input {
  width: 100%;
  background: #001534;
  border: 0.1rem solid #15DEA5;
  padding: 1.5rem;
  color: #D6FFF5;
  font-weight: 900;
  font-style: italic;
  font-size: 2.75rem; }
.form__field textarea {
  width: 100%;
  color: #15DEA5;

   background: #001534;
  border: 0.1rem solid #15DEA5;
  outline: none;
  padding: 1.5rem;
  margin-bottom: 0.75rem; }

Elle a un aspect légèrement différent par rapport à quand nous écrivions notre CSS à la main. Toutefois, Sass a préservé la hiérarchie visuelle du nesting issue des feuilles  .scss. C’est bien pratique, car ça vous permet de parcourir le fichier CSS facilement pour trouver les blocs de code qui vous intéressent.

Sass a quatre modes de compilation qui interprètent chacun le CSS d’une façon différente. Le premier, le mode par défaut, est ce que vous venez de voir, le mode nested.

Le deuxième mode de compilation est appelé expanded, et il ressemble en tout point à du CSS qu’on aurait rédigé manuellement :

.form {
width: 100%;
padding-bottom: 1.5rem;
}
.form__heading {
width: 100%;
color: #fff;
text-shadow: 0.55rem 0.55rem #11af82;
background: #15DEA5;
line-height: 5rem;
padding: 1.5rem;
}
.form__field label {
color: #D6FFF5;
display: block;
font-size: 2rem;
line-height: 2rem;
padding-top: 1.5rem;
}
.form__field input {
width: 100%;
background: #001534;
border: 0.1rem solid #15DEA5;
padding: 1.5rem;
color: #D6FFF5;
font-weight: 900;
font-style: italic;
font-size: 2.75rem;
}
.form__field textarea {
width: 100%;
color: #15DEA5;
background: #001534;
border: 0.1rem solid #15DEA5;
outline: none;
padding: 1.5rem;
margin-bottom: 0.75rem;
}

Certaines personnes préfèrent l’expanded plutôt que le nested parce qu’il leur paraît plus familier. À vous de voir.

Le troisième mode est compact. Il traduit le CSS avec un ensemble de règles par ligne :

.form { width: 100%; padding-bottom: 1.5rem; }
.form__heading { width: 100%; color: #fff; text-shadow: 0.55rem 0.55rem #11af82; background: #15DEA5; line-height: 5rem; padding: 1.5rem; }
.form__field label { color: #D6FFF5; display: block; font-size: 2rem; line-height: 2rem; padding-top: 1.5rem; }
.form__field input { width: 100%; background: #001534; border: 0.1rem solid #15DEA5; padding: 1.5rem; color: #D6FFF5; font-weight: 900; font-style: italic; font-size: 2.75rem; }
.form__field textarea { width: 100%; color: #15DEA5; background: #001534; border: 0.1rem solid #15DEA5; outline: none; padding: 1.5rem; margin-bottom: 0.75rem; }

Le mode compact donne un fichier plus court et légèrement plus léger qui nécessite moins de scrolling, mais il n’est pas forcément facile à lire.

Le quatrième et dernier mode est compressé. Quand Sass compile la feuille CSS en mode compressé, il retire tous les espaces et retours à la ligne inutiles :

.form{width:100%;padding-bottom:1.5rem}.form__heading{width:100%;color:#fff;text-shadow:.55rem .55rem #11af82;background:#15DEA5;line-height:5rem;padding:1.5rem}.form__field label{color:#D6FFF5;display:block;font-size:2rem;line-height:2rem;padding-top:1.5rem}.form__field input{width:100%;background:#001534;border:0.1rem solid #15DEA5;padding:1.5rem;color:#D6FFF5;font-weight:900;font-style:italic;font-size:2.75rem}.form__field textarea{width:100%;color:#15DEA5;background:#001534;border:0.1rem solid #15DEA5;outline:none;padding:1.5rem;margin-bottom:.75rem}

Le résultat est compliqué à lire, mais ça donne un fichier beaucoup plus léger. On appelle aussi cela un fichier CSS minifié, et c’est généralement ce qu’on utilise quand on déploie le site en live. La taille réduite du fichier diminue la quantité de données devant être téléchargées, ce qui réduit les temps de chargement, les besoins en matière d’espace de stockage et la consommation de données.

Mettons à jour le script pour qu’il compile votre CSS en mode compressé !

Découvrez la compilation en mode compressé

À la fin de votre script, vous devez ajouter un nouveau flag : --style, suivi du style dans lequel vous voulez compiler, compressed :

{
"name": "writting-sass",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "sass": "sass --watch ./sass/main.scss:./css/style.css --style compressed"
},
"author": "",
"license": "ISC",
}

Une fois le flag ajouté, cliquez sur Enregistrer pour mettre à jour votre fichier Sass et lancer une recompilation puisque --watch oberve chaque fois que votre code est modifié :

.form {
width: 100%;
padding-bottom: 1.5rem; }
.form__heading {
  width: 100%;
  color: #fff;
  text-shadow: 0.55rem 0.55rem #11af82;
  background: #15DEA5;
  line-height: 5rem;
  padding: 1.5rem; }
.form__field label {
  color: #D6FFF5;

   display: block;
  font-size: 2rem;
  line-height: 2rem;
  padding-top: 1.5rem; }
.form__field input {
  width: 100%;
  background: #001534;
  border: 0.1rem solid #15DEA5;
  padding: 1.5rem;
  color: #D6FFF5;
  font-weight: 900;
  font-style: italic;
  font-size: 2.75rem; }
.form__field textarea {
  width: 100%;
  color: #15DEA5;
  background: #001534;
  border: 0.1rem solid #15DEA5;
  outline: none;
  padding: 1.5rem;
  margin-bottom: 0.75rem; }

Mais ce n’est pas ça qu’on voulait. C’est toujours nesté, non, pourquuuuuoi ! 😭

Si vous regardez la ligne de commande de plus près, vous pouvez voir notre erreur :

Image du code qui n'a pas été arrêté
Le code continue de compiler

Nous n’avons jamais interrompu le script Sass originellement. Il tourne encore ! Et celui-ci avait un mode de compilation bien différent.

Pour compiler en utilisant notre script fraîchement modifié, il faut d’abord interrompre l’ancien script, en appuyant sur Ctrl+C. Ensuite, relancez-le en tapant à  nouveau npm run sass :

npm run sass

Notre script Sass fonctionne à nouveau, mais cette fois il inclut le style de compilation que nous voulions :

Le bon mode de compilation
Le bon mode de compilation

Cliquez à nouveau sur Enregistrer et regardez le code compilé :

.form{width:100%;padding-bottom:1.5rem}.form__heading{width:100%;color:#fff;text-shadow:.55rem .55rem #11af82;background:#15DEA5;line-height:5rem;padding:1.5rem}.form__field label{color:#D6FFF5;display:block;font-size:2rem;line-height:2rem;padding-top:1.5rem}.form__field input{width:100%;background:#001534;border:0.1rem solid #15DEA5;padding:1.5rem;color:#D6FFF5;font-weight:900;font-style:italic;font-size:2.75rem}.form__field textarea{width:100%;color:#15DEA5;background:#001534;border:0.1rem solid #15DEA5;outline:none;padding:1.5rem;margin-bottom:.75rem}

Par souci de concision, nous n’avons montré que le bloc   .form  pour chacun des modes de compilation. Lorsque vous compilez, vous voyez bien sûr l’intégralité de votre code CSS.

Essayez par vous-même !

Installez Sass et compilez le code donné en exemple en suivant les étapes vues dans ce chapitre.

https://api.next.tech/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=48dccb5b-18f6-4409-9101-fd866fbf1112

Vous avez réussi !

Organiser ses fichiers et installer des packages n’est pas l’activité la plus excitante du monde, mais c’est important. Rappelez-vous que vous passez beaucoup plus de temps à lire votre code qu’à l’écrire : plus votre codebase sera propre et bien organisée, plus vous serez en mesure de trouver et surtout comprendre des morceaux de code rapidement et facilement.

Continuez comme ça et votre futur vous aura une adoration sans fin envers votre vous présent.

En résumé

  • package.json contient les informations de votre projet.

  • La commande npm init initialise un fichier package.json.

  • La commande npm install sass -g installe Sass sur votre machine et pas seulement votre projet.

  • scripts contient la liste des commandes que vous pouvez exécuter en lancant npm + le nom du script.

  • Le flag --style permet de préciser sous quelle forme sera compilé votre CSS. Vous pouvez choisir entre nested, compressed, expanded ou compact.

Dans les chapitres suivants, on va revenir aux choses plus amusantes : se familiariser avec les types de données avancées de Sass et comment les utiliser pour vous faciliter encore un peu plus la vie !

Example of certificate of achievement
Example of certificate of achievement