Hvordan opsætter man et hurtigt Node.js Sass/SCSS-projekt?

Det ' SASS ' er en forkortelse for ' Syntaktisk fantastisk stilark ” som er kendt som en CSS-forprocessor. SASS er nem at bruge og letvægtet end CSS. Det styles nemt hele hjemmesiden hurtigt og debugger også stylingfejlene. Det virker på ' SCSS (Sassy Cascading Style Sheet) ” som en del af SASS. Det giver mere frihed og fleksibilitet til udviklerne, og man kan importere 'SCSS' til 'SASS'-projektet.

Denne vejledning vil illustrere den komplette procedure for opsætning af et hurtigt Node.js SASS/SCSS-projekt.

Hvordan opsætter man et hurtigt Node.js Sass/SCSS-projekt?

SASS bruger rene CSS-egenskaber til at udføre styling over det valgte element. Det styrker den originale CSS ved at inkludere de matematiske og variable funktioner. Det anvender styling på DOM i et hierarki. Ved at integrere SASS med Node.js kan udvikleren style projektet meget nemt for at gøre det mere iøjnefaldende og pixel-perfekt.

Lad os følge nedenstående trin for at konfigurere et Node.js-projekt langs SASS/SCSS.

Trin 1: Installation af 'SASS'

Først skal du installere ' SASS ' globalt i Node.js-projektet ved hjælp af node-pakkehåndteringen ' npm ' gennem denne kommando:

npm install -g sass

Outputtet viser, at ' saas ”-pakken er blevet installeret:

Trin 2: Oprettelse af mapper

Opret derefter separate mapper til både CSS- og SCSS-filer ved hjælp af følgende 'mkdir'-kommando:

mkdir cssFiles

mkdir scssFiles

Det kan ses, at ovenstående ' mkdir kommandoen har oprettet ' cssFiler ' og ' scssFiler ” mapper:

Trin 3: Link SASS-modulet

Brug nu ' frækt '-modul for at holde øje med eventuelle ændringer i de eksisterende filer i ' scssFiler ” bibliotek. I tilfælde af ændring vil den automatisk oprette CSS-filer inde i den linkede ' cssFiler ”-mappen og indsæt de samme scss-data i CSS-filen.

Kommandoen, der skal udføres for at se og forbinde ' frækt ” modul er som følger:

frækt --holde øje scssFiler : cssFiler

Nu holder saas øje med alle mulige ændringer i mappen scssFiles.

Bemærk: Ovenstående kommando skal udføres på systemets kommandoprompt, da det ikke vil fungere på værktøjsterminaler som Visual Studio-kode.

Trin 4: Oprettelse af SCSS og tilsvarende CSS-filer

I dette trin, en tom fil med navnet ' scssStyle ' med ' scss '-udvidelse bliver oprettet i ' scssFiler ” bibliotek:

Derefter to filer med navnet ' scssStyle.css ' og ' scssStyle.css.map ' bliver oprettet automatisk af ' frækt ' modul inde i ' cssFiler ” bibliotek, som vist nedenfor:

Trin 5: Indsættelse af kode

Indtast endelig en SCSS-kode i ' scssStyle.scss ' som vist nedenfor:

Nu bliver den samme kode i CSS-formatet automatisk indsat i ' scssStyle.css ' fil:

Lad os visuelt illustrere trin 4 og 5 ved hjælp af gif:

Denne vejledning har forklaret trinene til at oprette Node.js SASS\SCSS-projektet.

Konklusion

For at konfigurere et hurtigt Node.js SASS/SCSS-projekt skal du først installere modulet ' frækt '-modul, og opret derefter to mapper, en for ' SASS\SCSS ' fil og en anden for ' CSS ' filer. Derefter laver du ' frækt ' modul for at se enhver ændring i nyoprettede mapper gennem ' sass – se sass:css ” kommando. Som et resultat af denne handling bliver 'SASS\SCSS'-filen og to 'CSS'-filer automatisk genereret i 'CSS'-mappen. Hvis brugeren ændrer 'SASS\SCSS'-filerne, vil de nye ændringer automatisk blive indsat i CSS-filerne. Denne vejledning har forklaret den komplette procedure for opsætning af Node.js SASS\SCSS-projektet.

Hvordan opsætter man et hurtigt Node.js Sass/SCSS-projekt?