Urmăriți și compilați Sass în cinci pași rapizi

Ce veți crea

Sass este probabil cel mai popular dintre pre-procesoarele CSS; de ani de zile ne-a ajutat să scriem CSS curat, reutilizabil și modular. În acest tutorial rapid, voi trece direct la chestiile care contează și vă voi explica cum să compilați Sass în CSS utilizând linia de comandă.

1. Instalați Node.js

Pentru a compila Sass prin linia de comandă, mai întâi trebuie să instalăm node.js. Descărcați-l de pe site-ul oficial nodejs.org, deschideți pachetul și urmați expertul.

2. Inițializați NPM

NPM este managerul de pachete Node pentru JavaScript. NPM facilitează instalarea și dezinstalarea pachetelor terță parte. Pentru a inițializa un proiect Sass cu NPM, deschideți terminalul și CD-ul (schimbarea directorului) în folderul proiectului.

Navigarea la folderul proiectului Sass

Odată ajuns în dosarul corect, executați comanda npm init. Veți fi invitat să răspundeți la mai multe întrebări despre proiect, după care NPM va genera o package.json fișier în dosarul dvs..

3. Instalați Node-Sass

Node-sass este un pachet NPM care compilează Sass către CSS (ceea ce se întâmplă foarte repede). Pentru a instala node-sass executați următoarea comandă în terminal: npm instala nodul-sass

4. Scrie comanda nod-sass 

Totul este gata să scrie un mic script pentru a compila Sass. Deschideți fișierul package.json într-un editor de coduri. Veți vedea ceva de genul:

"nume": "sass-tutorial", "versiune": "1.0.0", "descriere" "Eroare: nici un test specificat \" && ieșire 1 "," autor ":" "," licență ":" ISC " 

În script-uri secțiune adăugați un SCSS comandă, în conformitate cu Test comandă, după cum se arată mai jos:

"scripts": "test": "echo \" Eroare: nici un test specificat \ "&& ieșire 1", "scss": "node-sass - vizionează scss -o css"

Să trecem prin cuvântul ăsta cu cuvântul. 

1. nod-Sass: Se referă la pachetul nod-sass.
2. --ceas: Un steguleț opțional care înseamnă "urmăriți-i pe toți .SCSS fișiere în SCSS / și recompilați-le de fiecare dată când există o schimbare. "
3. SCSS: Numele dosarului în care am pus toate fișierele noastre .scss.
4. -o css: Dosarul de ieșire pentru CSS compilat.

Când executam acest script, vom urmări fiecare .SCSS fișier în SCSS / folder, apoi salvați css-ul compilat în css / dosarul de fiecare dată când schimbăm o .SCSS fişier.

5. Rulați scriptul

Pentru a executa scriptul nostru de o singură linie, trebuie să executați următoarea comandă în terminal: npm run escss

Și voila! Urmărim și compilam SASS.

Sass Sfaturi rapide

Stay tuned pentru mai multe sfaturi rapide Sass; există o întreagă colecție pe drum!