Imaginez que vous ayez un projet front end, par exemple personnalisation d’un thème d’une boutique Magento, cela ne concerne que le CSS et HTML (voire du javascript), les fichiers sont gros, pouvant faire dix milles lignes en CSS, hors de question de le faire directement en CSS, il y a beaucoup mieux le Sass. Le Sass est un « langage » qui va se compiler en CSS, l’avantage est qu’il est facilement compréhensible, car sa syntaxe est structurée.
/* Sass */ div > p { color:blue; a { color : red; } } /* converti en CSS */ div > p { color: blue; } div > p a { color: red; }
L’exemple ci-dessus illustre la lisibilité de la notation en Sass, hiérachisée mais pas forcément plus concise, en revanche très lisible, la syntaxe Sass est beaucoup plus riche et plus puissante que ne le montre l’exemple ci-dessus. En comparaison, la notation CSS est plus plate et répétitive, et bien sûr moins lisible.
NPM va nous permettre d’installer les dépendances, et dans le cas du Sass, on va installer node-sass pour compiler le Sass en CSS à chaque fois qu’on enregistre le fichier Sass (extension .scss).
Initialisation d’un projet NPM
npm init
Après cette commande vous devez répondre à un tas de questions comme le nom du projet, le propriétaire, la licence, pas mal de champs sont optionnels rassurez-vous etc.
Un fichier package.json est généré.
Ensuite installons le paquet node-sass
. Ce dernier permet de surveiller les modifications d’un fichier Sass et de compiler en CSS automatiquement.
$ npm install -D node-sass nodemon #le D signifie une dev dependency
Dans votre package.json, ajoutez ces lignes
“scripts”: { “build-css”: “node-sass --include-path scss scss/main.scss public/css/main.css” } #Pour lancer la compilation $ npm run build-css
Mieux encore watcher pour automatiquement compiler au moindre changement puis sauvegarde du fichier sass.
“scripts”: { “build-css”: “node-sass --include-path scss scss/main.scss public/css/main.css”, “watch-css”: “nodemon -e scss -x \”npm run build-css\”” },
lien : https://medium.com/@brianhan/watch-compile-your-sass-with-npm-9ba2b878415b