Tämä opas havainnollistaa nopean Node.js SASS/SCSS -projektin koko prosessin.
Kuinka perustaa nopea Node.js Sass/SCSS -projekti?
SASS käyttää puhtaita CSS-ominaisuuksia suorittaakseen tyylin valitulle elementille. Se tehostaa alkuperäistä CSS:ää sisällyttämällä siihen matemaattisia ja muuttuvia ominaisuuksia. Se soveltaa tyyliä DOM:ssa hierarkiassa. Integroimalla SASS:n Node.js:n kanssa kehittäjä voi muotoilla projektin erittäin helposti tehdäkseen siitä katseenvangitsijamman ja pikselin täydellisen.
Noudatetaan alla olevia ohjeita Node.js-projektin määrittämiseksi SASS/SCSS:n kautta.
Vaihe 1: Asenna 'SASS'
Asenna ensin ' SASS ” maailmanlaajuisesti Node.js-projektissa solmun pakettien hallintaa käyttäen ” npm ' tällä komennolla:
npm install -g sass
Tulos osoittaa, että ' saas ' paketti on asennettu:
Vaihe 2: Hakemistojen luominen
Luo seuraavaksi erilliset hakemistot sekä CSS- että SCSS-tiedostoille käyttämällä seuraavaa 'mkdir'-komentoa:
mkdir cssFiles
mkdir scssFiles
Voidaan nähdä, että yllä oleva ' mkdir ' -komento on luonut ' cssFiles ' ja ' scssFiles 'hakemistot:
Vaihe 3: Yhdistä SASS-moduuli
Käytä nyt ' sass ' -moduulin tarkkailemaan mahdollisia muutoksia ' scssFiles ”hakemistosta. Jos muutoksia tehdään, se luo automaattisesti CSS-tiedostoja linkitetyn ' cssFiles ” hakemistoon ja lisää samat scss-tiedot CSS-tiedostoon.
Suoritettava komento ' sass ”-moduuli on seuraava:
sass --katsella scssFiles : cssFilesNyt saas tarkkailee kaikenlaisia muutoksia scssFiles-hakemistoon.
Huomautus: Yllä oleva komento tulee suorittaa järjestelmän komentokehotteella, koska se ei toimi työkalupäätteissä, kuten Visual Studio -koodissa.
Vaihe 4: Luo SCSS ja vastaavat CSS-tiedostot
Tässä vaiheessa tyhjä tiedosto nimeltä ' scssStyle ' kanssa ' scss ' laajennus luodaan ' scssFiles 'hakemisto:
Sen jälkeen kaksi tiedostoa, joiden nimi on ' scssStyle.css ' ja ' scssStyle.css.map ' luodaan automaattisesti ' sass ' moduuli ' cssFiles ' hakemistosta alla olevan kuvan mukaisesti:
Vaihe 5: Koodin lisääminen
Kirjoita lopuksi jokin SCSS-koodi ' scssStyle.scss ' kuten alla:
Nyt sama koodi CSS-muodossa lisätään automaattisesti ' scssStyle.css 'tiedosto:
Havainnollistetaan visuaalisesti vaiheet 4 ja 5 gif:n avulla:
Tässä oppaassa on selitetty vaiheet Node.js SASS\SCSS -projektin luomiseksi.
Johtopäätös
Jos haluat määrittää nopean Node.js SASS/SCSS -projektin, asenna ensin moduuli ' sass ' -moduulia ja luo sitten kaksi hakemistoa SASS\SCSS '-tiedosto ja toinen '' CSS ' tiedostot. Tee sen jälkeen ' sass ' -moduulia, jotta voit katsella muutoksia äskettäin luoduissa hakemistoissa ' sass – katso sass:css ”komento. Tämän toiminnon seurauksena 'SASS\SCSS'-tiedosto ja kaksi 'CSS'-tiedostoa luodaan automaattisesti 'CSS'-kansioon. Jos käyttäjä muokkaa 'SASS\SCSS'-tiedostoja, uudet muutokset lisätään automaattisesti CSS-tiedostoihin. Tässä oppaassa on selitetty Node.js SASS\SCSS -projektin koko asennusprosessi.