Regardez et compilez Sass en cinq étapes rapides

Ce que vous allez créer

Sass est peut-être le plus populaire des pré-processeurs CSS; Pendant des années, cela nous a aidé à écrire des CSS propres, modulaires et réutilisables. Dans ce rapide tutoriel, je vais passer directement à l'essentiel et expliquer comment compiler Sass en CSS à l'aide de 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. Initialiser le NPM

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

Navigation dans le dossier du projet Sass

Une fois dans le bon dossier, lancez la commande npm init. Vous serez invité à répondre à plusieurs questions sur le projet, après quoi NPM générera une package.json déposer dans votre dossier.

3. Installez Node-Sass

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

4. Écrire la commande Node-sass 

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

"name": "sass-tutorial", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": "echo \ "Erreur: aucun test spécifié \" && exit 1 "," author ":" "," license ":" ISC " 

dans le des scripts section ajouter un scss commande, sous la tester commande, comme indiqué ci-dessous:

"scripts": "test": "echo \" Erreur: aucun test spécifié \ "&& exit 1", "scss": "node-sass --watch scss -o css"

Parcourons cette ligne mot à mot. 

1. node-sass: Fait référence au paquetage node-sass.
2. --regarder: Un drapeau optionnel qui signifie "regarder tout .scss fichiers dans le scss / dossier 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 pour notre CSS compilé.

Lorsque nous exécutons ce script, il surveillera chaque .scss déposer dans le scss / dossier, puis enregistrez le css compilé dans css / dossier à chaque fois que nous changeons un .scss fichier.

5. Exécuter le script

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

Et le tour est joué! Nous regardons et compilons le SASS.

Sass Astuces

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