Šajā rokasgrāmatā ir parādīta visa procedūra ātra Node.js SASS/SCSS projekta iestatīšanai.
Kā iestatīt ātru Node.js Sass/SCSS projektu?
SASS izmanto tīrus CSS rekvizītus, lai veiktu stilu pār atlasīto elementu. Tas nodrošina sākotnējo CSS, iekļaujot matemātikas un mainīgās funkcijas. Tas piemēro stilu DOM hierarhijā. Integrējot SASS ar Node.js, izstrādātājs var ļoti viegli izveidot projekta stilu, padarot to pievilcīgāku un pikseļu perfektu.
Izpildiet tālāk norādītās darbības, lai iestatītu Node.js projektu kopā ar SASS/SCSS.
1. darbība: SASS instalēšana
Vispirms instalējiet ' SASS ” globāli projektā Node.js, izmantojot mezgla pakotņu pārvaldnieku ” npm 'izmantojot šo komandu:
npm install -g sass
Izvade parāda, ka ' saas ” pakotne ir instalēta:
2. darbība: direktoriju izveide
Pēc tam izveidojiet atsevišķus direktorijus gan CSS, gan SCSS failiem, izmantojot šo komandu “mkdir”:
mkdir cssFiles
mkdir scssFiles
Var redzēt, ka iepriekš minētais ' mkdir komanda ir izveidojusi cssFiles ' un ' scssFiles ” direktoriji:
3. darbība. Saistiet SASS moduli
Tagad izmantojiet ' sass ” moduli, lai uzraudzītu jebkādas izmaiņas esošajos failos scssFiles ” direktoriju. Modifikācijas gadījumā tas automātiski izveidos CSS failus saistītajā ' cssFiles ” direktorijā un ievietojiet tos pašus scss datus CSS failā.
Komanda, kas jāizpilda, lai skatītos un saistītu “ sass ” modulis ir šāds:
sass -- skaties scssFiles : cssFilesTagad saas meklē visu veidu izmaiņas direktorijā scssFiles.
Piezīme: Iepriekš minētā komanda ir jāizpilda sistēmas komandu uzvednē, jo tā nedarbosies tādu rīku termināļos kā Visual Studio kods.
4. darbība: SCSS un atbilstošo CSS failu izveide
Šajā darbībā tukšs fails ar nosaukumu ' scssStyle ' ar ' scss paplašinājums tiek izveidots iekšā scssFiles ” direktorijs:
Pēc tam divi faili ar nosaukumu “ scssStyle.css ' un ' scssStyle.css.map ' tiek automātiski izveidots ar ' sass ' modulis iekšpusē ' cssFiles ” direktorijā, kā parādīts zemāk:
5. darbība: koda ievietošana
Visbeidzot ievadiet kādu SCSS kodu iekšpusē ' scssStyle.scss ”, kā parādīts zemāk:
Tagad tas pats kods CSS formātā automātiski tiek ievietots failā “ scssStyle.css ” fails:
Vizuāli ilustrēsim 4. un 5. darbību ar gif palīdzību:
Šajā rokasgrāmatā ir izskaidrotas darbības, lai izveidotu projektu Node.js SASS\SCSS.
Secinājums
Lai iestatītu ātru Node.js SASS/SCSS projektu, vispirms instalējiet moduli ' sass ” moduli un pēc tam izveidojiet divus direktorijus vienu „ SASS\SCSS ' fails un vēl viens ' CSS ” faili. Pēc tam veiciet ' sass ” moduli, lai skatītu visas izmaiņas jaunizveidotajos direktorijos, izmantojot sass – skatīties sass:css ” komandu. Šīs darbības rezultātā fails “SASS\SCSS” un divi “CSS” faili tiek automātiski ģenerēti mapē “CSS”. Ja lietotājs modificē “SASS\SCSS” failus, jaunās izmaiņas automātiski tiks ievietotas CSS failos. Šajā rokasgrāmatā ir izskaidrota visa procedūra Node.js SASS\SCSS projekta iestatīšanai.