Kuidas seadistada kiiret Node.js Sass/SCSS-projekti?

' SASS ' on akronüüm sõnast ' Süntaktiliselt vinge stiilileht ”, mis on tuntud kui CSS-i eelprotsessor. SASS-i on lihtne kasutada ja see on kerge kaaluga kui CSS. See stiilib hõlpsalt kogu veebisaidi kiiresti ja silub ka stiilivead. See töötab ' SCSS (Sassy Cascading Style Sheet) ” SASSi osana. See annab arendajatele rohkem vabadust ja paindlikkust ning saab importida 'SCSS' projekti 'SASS'.

See juhend illustreerib täielikku protseduuri kiire Node.js SASS/SCSS projekti seadistamiseks.

Kuidas seadistada kiiret Node.js Sass/SCSS-projekti?

SASS kasutab valitud elemendi stiili tegemiseks puhtaid CSS-i atribuute. See annab algsele CSS-ile võimaluse, lisades matemaatilisi ja muutuvaid funktsioone. See rakendab DOM-i stiili hierarhias. Integreerides SASS-i Node.js-iga, saab arendaja projekti väga lihtsalt kujundada, et muuta see pilkupüüdvamaks ja pikslite täiuslikumaks.

Järgime allolevaid samme, et seadistada SASS/SCSS-i kaudu Node.js-projekt.

1. samm: SASS-i installimine

Esmalt installige ' SASS ” globaalselt projektis Node.js, kasutades sõlme paketihaldurit ” npm ” selle käsu kaudu:

npm install -g sass

Väljund näitab, et ' saas ” pakett on installitud:

2. samm: kataloogide loomine

Järgmisena looge nii CSS- kui ka SCSS-failide jaoks eraldi kataloogid, kasutades järgmist käsku 'mkdir'.

mkdir cssFiles

mkdir scssFiles

On näha, et ülaltoodud ' mkdir ” käsk on loonud „ cssFiles ” ja „ scssFiles ” kataloogid:

3. samm: ühendage SASS-moodul

Nüüd kasutage ' sass ” moodulit, et jälgida muudatusi faili „ asuvates failides scssFiles ” kataloog. Muutmise korral loob see automaatselt CSS-failid lingitud ' cssFiles ” kataloogi ja sisestage samad scss-andmed CSS-faili.

Käsk, mis tuleb täita '' vaatamiseks ja linkimiseks sass ” moodul on järgmine:

sass --vaata scssFiles : cssFiles

Nüüd jälgib saas kataloogis scssFiles igasuguseid muudatusi.

Märge: Ülaltoodud käsk tuleks käivitada süsteemi käsureal, kuna see ei tööta tööriistaterminalides, nagu Visual Studio kood.

4. samm: SCSS-i ja vastavate CSS-failide loomine

Selles etapis ilmub tühi fail nimega ' scssStyle ' koos ' scss ' laiendus luuakse jaotises ' scssFiles ” kataloog:

Pärast seda kaks faili nimega ' scssStyle.css ” ja „ scssStyle.css.map ' luuakse automaatselt sass ' mooduli ' sees cssFiles ” kataloog, nagu allpool näidatud:

5. samm: koodi sisestamine

Lõpuks sisestage mõni SCSS-kood ' scssStyle.scss ' nagu allpool näidatud:

Nüüd sisestatakse sama kood CSS-vormingus automaatselt ' scssStyle.css ” fail:

Illustreerime 4. ja 5. sammu visuaalselt gifi abil:

Selles juhendis on selgitatud projekti Node.js SASS\SCSS loomise etappe.

Järeldus

Kiire Node.js SASS/SCSS projekti seadistamiseks installige esmalt moodul ' sass ” moodulit ja seejärel looge kaks kataloogi üks „ SASS\SCSS ' fail ja teine '' jaoks CSS ” failid. Pärast seda tehke ' sass ” moodul, et vaadata äsja loodud kataloogides tehtud muudatusi läbi „ sass – vaata sass:css ” käsk. Selle toimingu tulemusel genereeritakse fail 'SASS\SCSS' ja kaks 'CSS' faili automaatselt 'CSS' kausta. Kui kasutaja muudab 'SASS\SCSS' faile, lisatakse uued muudatused automaatselt CSS-failidesse. Selles juhendis on selgitatud projekti Node.js SASS\SCSS seadistamise täielikku protseduuri.

Kuidas seadistada kiiret Node.js Sass/SCSS-projekti?