SASS
Codez votre style plus facilement et rapidement.
Introduction
Le langage SASS nous permet de coder de façon plus efficace et d’avoir un code beaucoup plus maintenable et confortable.
Ce langage reste cependant uniquement un intermédiaire : il n’est pas compris par les navigateurs et sert juste à générer du CSS.
Compiler un fichier SASS en CSS avec VS Code
Pour compiler un fichier SASS en CSS, vous pouvez utiliser l’extension Live SASS compiler.
Cette extension, une fois lancée, va compiler chaque fichier SASS du projet en CSS (un fichier SASS = un fichier CSS).
Compiler plusieurs fichiers SASS en un seul CSS
Pour compiler plusieurs fichiers SASS en un seul fichier CSS, nous allons utiliser le gestionnaire de package npm qui tourne avec node, car il s’agit de process plus complexe.
- Récupérer le fichier de configuration npm
package.jsontout prêt qui va nous permettre de compiler le SASS en CSS, en plus de nous apporter d’autres choses utiles - Installer toutes les dépendances mentionnées dans le
package.jsonqui vont nous permettre de faire fonctionner le tout en faisant la commandenpm installdans le terminal de vs code - Une fois que toutes les dépendances sont installées, nous pouvons désormais utiliser les scripts définis dans le package.json en tapant dans le terminal
npm run [nom_du_script]
Scripts
| Commande | Explication |
npm run watch |
Compile le SASS à chaque changement d’un fichier |
npm run build-autoprefix |
Autoprefix le code, maximise/améliore la comptabilité du code entre les différents navigateurs |
npm run build-cleancss |
Nettoie le CSS en enlevant les commentaires, et enlève tous les espaces et retours à la ligne pour minimiser la taille du fichier CSS |
npm run deploy |
Fait toutes les commandes précédentes |