Hvordan sette opp et raskt Node.js Sass/SCSS-prosjekt?

« SASS ' er et akronym for ' Syntaktisk fantastisk stilark ” som er kjent som en CSS-forprosessor. SASS er enkel å bruke og har en lav vekt enn CSS. Det styles enkelt hele nettstedet raskt og feilsøker også stylingfeilene. Det fungerer på ' SCSS (Sassy Cascading Style Sheet) ” som en del av SASS. Det gir mer frihet og fleksibilitet til utviklerne, og man kan importere 'SCSS' til 'SASS'-prosjektet.

Denne veiledningen vil illustrere hele prosedyren for å sette opp et raskt Node.js SASS/SCSS-prosjekt.

Hvordan sette opp et raskt Node.js Sass/SCSS-prosjekt?

SASS bruker rene CSS-egenskaper for å utføre styling over det valgte elementet. Den styrker den originale CSS ved å inkludere matematiske og variable funksjoner. Den bruker styling på DOM i et hierarki. Ved å integrere SASS med Node.js kan utvikleren style prosjektet veldig enkelt for å gjøre det mer iøynefallende og pikselperfekt.

La oss følge trinnene nedenfor for å sette opp et Node.js-prosjekt langs SASS/SCSS.

Trinn 1: Installere 'SASS'

Først installer ' SASS ' globalt i Node.js-prosjektet ved å bruke nodepakkebehandlingen ' npm ' gjennom denne kommandoen:

npm install -g sass

Utgangen viser at ' saas '-pakken er installert:

Trinn 2: Lage kataloger

Deretter oppretter du separate kataloger for både CSS- og SCSS-filer ved å bruke følgende 'mkdir'-kommando:

mkdir cssFiles

mkdir scssFiles

Det kan sees at ovennevnte ' mkdir ' kommandoen har opprettet ' cssFiler ' og ' scssFiler ' kataloger:

Trinn 3: Koble til SASS-modulen

Bruk nå ' frekk '-modulen for å se etter eventuelle endringer i de eksisterende filene til ' scssFiler ”-katalogen. I tilfelle endring vil den automatisk lage CSS-filer inne i den tilknyttede ' cssFiler ”-katalogen og sett inn de samme scss-dataene i CSS-filen.

Kommandoen som skal utføres for å se og koble til ' frekk modulen er som følger:

frekk --se scssFiler : cssFiler

Nå ser saas etter alle slags modifikasjoner i scssFiles-katalogen.

Merk: Kommandoen ovenfor bør utføres på systemets kommandoprompt, da den ikke vil fungere på verktøyterminaler som Visual Studio-kode.

Trinn 4: Oppretting av SCSS og tilsvarende CSS-filer

I dette trinnet, en tom fil kalt ' scssStyle ' med ' scss '-utvidelsen opprettes i ' scssFiler ' katalog:

Etter det, to filer med navnet ' scssStyle.css ' og ' scssStyle.css.map ' blir opprettet automatisk av ' frekk ' modul inne i ' cssFiler ”-katalog, som vist nedenfor:

Trinn 5: Sette inn kode

Til slutt, skriv inn en SCSS-kode i ' scssStyle.scss ' som vist under:

Nå blir den samme koden i CSS-formatet automatisk satt inn i ' scssStyle.css ' fil:

La oss visuelt illustrere trinn 4 og 5 ved hjelp av gif:

Denne veiledningen har forklart trinnene for å lage Node.js SASS\SCSS-prosjektet.

Konklusjon

For å sette opp et raskt Node.js SASS/SCSS-prosjekt, installer først modulen ' frekk '-modulen, og opprett deretter to kataloger en for ' SASS\SCSS ' fil og en annen for ' CSS ' filer. Etter det, gjør ' frekk '-modulen for å se eventuelle endringer i nyopprettede kataloger gjennom ' sass – se sass:css ' kommando. Som et resultat av denne handlingen blir 'SASS\SCSS'-filen og to 'CSS'-filer automatisk generert i 'CSS'-mappen. Hvis brukeren endrer 'SASS\SCSS'-filene, vil de nye endringene automatisk bli satt inn i CSS-filene. Denne veiledningen har forklart hele prosedyren for å sette opp Node.js SASS\SCSS-prosjektet.

Hvordan sette opp et raskt Node.js Sass/SCSS-prosjekt?