Regardez et compilez Sass en cinq étapes rapides

Sass est peut-être le plus populaire des pré-processeurs CSS; depuis des années, il nous aide à écrire des CSS propres, réutilisables et modulaires. Dans ce tutoriel rapide, je vais couper directement à la substance qui compte et expliquer comment compiler Sass en CSS en utilisant la ligne de commande.

1. Installez Node.js

Pour compiler Sass via la ligne de commande, nous devons d'abord installer node.js. Téléchargez-le sur le site officiel nodejs.org, ouvrez le paquet et suivez l'assistant.

2. Initialisez le NPM

NPM est le gestionnaire de nœuds pour JavaScript. NPM facilite l'installation et la désinstallation de packages tiers. Pour initialiser un projet Sass avec NPM, ouvrez votre terminal et CD (répertoire de modification) dans votre dossier de projet.

Une fois dans le dossier correct, exécutez la commande npm init. Vous serez invité à répondre à plusieurs questions sur le projet, après quoi NPM va générer un fichier package.json dans votre dossier.

3. Installez Node-Sass

Node-sass est un paquet NPM qui compile Sass en CSS (ce qu'il fait très rapidement aussi). Pour installer node-sass, exécutez la commande suivante dans votre terminal: npm install node-sass

4. Écrivez la commande Node-sass

Tout est prêt à écrire un petit script pour compiler Sass. Ouvrez le fichier package.json dans un éditeur de code. Vous verrez quelque chose comme ceci:

1

{

2

  "name": "sass-tutorial",

3

  "version": "1.0.0",

4

  "description": "",

5

  "main": "index.js",

6

  "scripts": {

7

    "test": "echo \"Error: no test specified\" && exit 1"

8

  },

9

  "author": "",

10

  "license": "ISC"

11

}

Dans la section scripts, ajoutez une commande scss, sous la commande test, comme indiqué ci-dessous:

1

"scripts": {

2

  "test": "echo \"Error: no test specified\" && exit 1",

3

  "scss": "node-sass -watch scss -o css"

4

}

Passons par cette ligne mot à mot.

1. node-sass: Désigne le paquet node-sass.
2. -watch: Un drapeau facultatif qui signifie "regarder tous les fichiers .scss dans le dossier scss/ et les recompiler chaque fois qu'il y a un changement".
3. scss: Le nom du dossier où nous mettons tous nos fichiers .scss.
4. -o css: Le dossier de sortie de notre CSS compilé.

Lorsque nous exécutons ce script, il va regarder chaque fichier .scss dans le dossier scss/, puis enregistrer le css compilé dans css/ dossier chaque fois que nous changeons un fichier .scss.

5. Exécutez le script

Pour exécuter notre script en une seule ligne, nous devons exécuter la commande suivante dans le terminal: npm run scss

Et voilà! Nous regardons et compilons SASS.

Sass Conseils Rapides

Restez à l'écoute pour plus de conseils Sass rapide; il y a toute une collection sur le chemin!