Ez az útmutató bemutatja a gyors Node.js SASS/SCSS projekt beállításának teljes folyamatát.
Hogyan állítsunk be egy gyors Node.js Sass/SCSS projektet?
A SASS tiszta CSS-tulajdonságokat használ a kiválasztott elem stílusának végrehajtásához. Felhatalmazza az eredeti CSS-t azáltal, hogy magában foglalja a matematikai és a változó funkciókat. A stílust hierarchiában alkalmazza a DOM-on. A SASS-nak a Node.js-szel való integrálásával a fejlesztő nagyon egyszerűen alakíthatja a projekt stílusát, hogy szemet gyönyörködtetőbbé és pixel-tökéletesebbé tegye.
Kövesse az alábbi lépéseket egy Node.js projekt beállításához a SASS/SCSS mentén.
1. lépés: A „SASS” telepítése
Először telepítse a ' SASS ” globálisan a Node.js projektben a csomópont csomagkezelő használatával npm ” ezzel a paranccsal:
npm install -g sass
A kimenet azt mutatja, hogy ' saas ” csomag telepítve van:
2. lépés: Könyvtárak készítése
Ezután a következő „mkdir” paranccsal hozzon létre külön könyvtárakat a CSS- és az SCSS-fájlok számára:
mkdir cssFiles
mkdir scssFiles
Látható, hogy a fenti ' mkdir ' parancs létrehozta a ' cssFiles ” és „ scssFiles ” könyvtárak:
3. lépés: Kapcsolja össze a SASS modult
Most használja a „ sass ” modult, hogy figyelje a „ scssFiles ' Könyvtár. Módosítás esetén automatikusan létrehozza a CSS fájlokat a linkelt ' cssFiles ” könyvtárba, és illessze be ugyanazokat az scss adatokat a CSS fájlba.
A végrehajtandó parancs a „ sass ” modul a következő:
sass --néz scssFiles : cssFilesMost a saas mindenféle módosítást figyel az scssFiles könyvtárban.
Jegyzet: A fenti parancsot a rendszer parancssorában kell végrehajtani, mivel nem fog működni olyan eszközterminálokon, mint a Visual Studio kód.
4. lépés: SCSS és a megfelelő CSS-fájlok létrehozása
Ebben a lépésben egy üres fájl ' scssStyle ' val vel ' scss ' kiterjesztés jön létre a ' scssFiles ' Könyvtár:
Ezt követően két fájl a következővel: scssStyle.css ” és „ scssStyle.css.map ' automatikusan létrejön a ' sass ' modul a ' cssFiles ” könyvtárban, az alábbiak szerint:
5. lépés: Kód beszúrása
Végül írjon be néhány SCSS-kódot a „ scssStyle.scss ” az alábbiak szerint:
Most ugyanez a kód CSS formátumban automatikusan bekerül a „ scssStyle.css ” fájl:
Vizuálisan illusztráljuk a 4. és 5. lépést gif segítségével:
Ez az útmutató ismerteti a Node.js SASS\SCSS projekt létrehozásának lépéseit.
Következtetés
Egy gyors Node.js SASS/SCSS projekt beállításához először telepítse a „ sass ” modult, majd hozzon létre két könyvtárat a „ SASS\SCSS ' fájl és egy másik a ' CSS ” fájlokat. Ezt követően készítse el a „ sass ” modult az újonnan létrehozott könyvtárakban a „ sass – Watch sass:css ” parancsot. A művelet eredményeként a „SASS\SCSS” fájl és két „CSS” fájl automatikusan létrejön a „CSS” mappában. Ha a felhasználó módosítja a „SASS\SCSS” fájlokat, akkor az új módosítások automatikusan bekerülnek a CSS-fájlokba. Ez az útmutató ismerteti a Node.js SASS\SCSS projekt beállításának teljes folyamatát.