Kijk en compileer Sass in vijf snelle stappen

Wat je gaat creëren

Sass is misschien wel de meest populaire van de CSS-pre-processors; al jaren helpt het ons bij het schrijven van schone, herbruikbare en modulaire CSS. In deze korte tutorial ga ik meteen door naar de dingen die ertoe doen en leg ik uit hoe je Sass kunt compileren in CSS via de opdrachtregel.

1. Installeer Node.js

Om Sass via de opdrachtregel te compileren, moeten we eerst node.js. Download het van de officiële website nodejs.org, open het pakket en volg de wizard.

2. Initialiseer NPM

NPM is de Node Package Manager voor JavaScript. NPM maakt het eenvoudig om pakketten van derden te installeren en de-installeren. Om een ​​Sass-project met NPM te initialiseren, opent u uw terminal en cd (van directory veranderen) naar uw projectmap.

Navigeren naar de Sass-projectmap

Eenmaal in de juiste map voert u de opdracht uit npm init. U wordt gevraagd om een ​​aantal vragen over het project te beantwoorden, waarna NPM een package.json bestand in uw map.

3. Installeer Node-Sass

Node-sass is een NPM-pakket dat Sass compileert met CSS (wat het ook zeer snel doet). Om knooppunt-sass te installeren, voert u de volgende opdracht uit in uw terminal: npm install node-sass

4. Schrijf opdracht Node-sass 

Alles is gereed om een ​​klein script te schrijven om Sass te compileren. Open het bestand package.json in een codebewerker. Je ziet zoiets als dit:

"naam": "sass-tutorial", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": "echo \ "Fout: geen test opgegeven \" && exit 1 "," author ":" "," license ":" ISC " 

In de scripts sectie voeg een toe SCSS commando, onder de test commando, zoals hieronder getoond:

"scripts": "test": "echo \" Fout: geen test opgegeven \ "&& exit 1", "scss": "node-sass --watch scss -o css"

Laten we deze regel woord voor woord doorlopen. 

1. knooppunt-sass: Verwijst naar het knooppunt-sass-pakket.
2. --kijk maar: Een optionele vlag die 'alles weergeven' betekent .SCSS bestanden in de SCSS / map en hercompileer ze telkens als er een wijziging is. "
3. SCSS: De mapnaam waar al onze .scss-bestanden worden geplaatst.
4. -o css: De uitvoermap voor onze gecompileerde CSS.

Wanneer we dit script uitvoeren, zal het alles bekijken .SCSS bestand in de SCSS / map en sla de gecompileerde CSS op css / folder elke keer dat we een veranderen .SCSS het dossier.

5. Voer het script uit

Om ons script met één regel uit te voeren, moeten we de volgende opdracht uitvoeren in de terminal: npm run scss

En voila! We kijken naar en compileren SASS.

Sass Snelle tips

Blijf op de hoogte voor meer snelle tips van Sass; er is een hele verzameling onderweg!