Acest ghid va ilustra procedura completă pentru a configura un proiect rapid Node.js SASS/SCSS.
Cum se configurează un proiect rapid Node.js Sass/SCSS?
SASS folosește proprietăți CSS pure pentru a efectua stilizarea elementului selectat. Îmbunătățește CSS-ul original prin includerea caracteristicilor matematice și variabile. Se aplică stilul pe DOM într-o ierarhie. Prin integrarea SASS cu Node.js, dezvoltatorul poate stila proiectul foarte ușor, pentru a-l face mai atrăgător și perfect pentru pixeli.
Să urmăm pașii de mai jos pentru a configura un proiect Node.js de-a lungul SASS/SCSS.
Pasul 1: Instalarea „SASS”
Mai întâi, instalați „ SASS ” la nivel global în proiectul Node.js folosind managerul de pachete node ” npm ” prin această comandă:
npm install -g sass
Rezultatul arată că „ saas ” a fost instalat pachetul:
Pasul 2: Crearea directoarelor
Apoi, creați directoare separate pentru fișierele CSS și SCSS folosind următoarea comandă „mkdir”:
mkdir cssFiles
mkdir scssFiles
Se poate observa că cele de mai sus „ mkdir Comanda ' a creat ' cssFiles ' și ' scssFiles ” directoare:
Pasul 3: Conectați modulul SASS
Acum, folosiți „ sass ” pentru a urmări orice modificări în fișierele rezidente ale „ scssFiles ” director. În cazul modificării, va crea automat fișiere CSS în interiorul „linked” cssFiles ” și inserați aceleași date scss în fișierul CSS.
Comanda care trebuie executată pentru vizionarea și conectarea „ sass ” modulul este următorul:
sass --ceas scssFiles : cssFilesAcum, saas urmărește tot felul de modificări în directorul scssFiles.
Notă: Comanda de mai sus ar trebui să fie executată în linia de comandă a sistemului, deoarece nu va funcționa pe terminale de instrumente precum codul Visual Studio.
Pasul 4: Crearea SCSS și a fișierelor CSS corespunzătoare
În acest pas, un fișier gol numit „ scssStyle ' cu ' scss ” este creată în interiorul „ scssFiles ” director:
După aceea, două fișiere cu numele „ scssStyle.css ' și ' scssStyle.css.map ” sunt create automat de către „ sass ” modulul din interiorul “ cssFiles ” director, după cum se arată mai jos:
Pasul 5: Introducerea codului
În cele din urmă, introduceți un cod SCSS în interiorul „ scssStyle.scss ' așa cum se arată mai jos:
Acum, același cod în format CSS este inserat automat în interiorul „ scssStyle.css ” fișier:
Să ilustrăm vizual pașii 4 și 5 cu ajutorul gif:
Acest ghid a explicat pașii pentru crearea proiectului Node.js SASS\SCSS.
Concluzie
Pentru a configura un proiect rapid Node.js SASS/SCSS, mai întâi instalați modulul „ sass ” și apoi creați două directoare unul pentru „ SASS\SCSS ” și altul pentru “ CSS ” fișiere. După aceea, faceți „ sass ” pentru a urmări orice modificare în directoarele nou create prin intermediul „ sass –watch sass:css ” comanda. Ca urmare a acestei acțiuni, fișierul „SASS\SCSS” și două fișiere „CSS” sunt generate automat în folderul „CSS”. Dacă utilizatorul modifică fișierele „SASS\SCSS”, atunci noile modificări vor fi inserate automat în fișierele CSS. Acest ghid a explicat procedura completă pentru configurarea proiectului Node.js SASS\SCSS.