Táto príručka bude ilustrovať úplný postup nastavenia rýchleho projektu Node.js SASS/SCSS.
Ako nastaviť rýchly projekt Node.js Sass/SCSS?
SASS používa čisté vlastnosti CSS na vykonanie štýlu nad vybratým prvkom. Posilňuje pôvodný CSS zahrnutím matematických a variabilných funkcií. Aplikuje štýl na DOM v hierarchii. Vďaka integrácii SASS s Node.js môže vývojár navrhnúť projekt veľmi jednoducho tak, aby bol pútavejší a dokonalejší na pixely.
Nasledujme kroky uvedené nižšie na nastavenie projektu Node.js pozdĺž SASS/SCSS.
Krok 1: Inštalácia „SASS“
Najprv nainštalujte „ SASS “ globálne v projekte Node.js pomocou správcu balíkov uzlov “ npm “ prostredníctvom tohto príkazu:
npm install -g sass
Výstup ukazuje, že „ saas “ bol nainštalovaný balík:
Krok 2: Vytváranie adresárov
Potom vytvorte samostatné adresáre pre súbory CSS aj SCSS pomocou nasledujúceho príkazu „mkdir“:
mkdir cssFiles
mkdir scssFiles
Je vidieť, že vyššie uvedené „ mkdir 'príkaz vytvoril ' cssFiles “ a „ scssFiles ” adresáre:
Krok 3: Prepojte modul SASS
Teraz použite „ sass “, aby ste sledovali akékoľvek úpravy v súboroch „ scssFiles “. V prípade úpravy automaticky vytvorí CSS súbory v prepojenom „ cssFiles ” a vložte rovnaké údaje scss do súboru CSS.
Príkaz, ktorý sa má vykonať na sledovanie a prepojenie súboru „ sass “ modul je nasledovný:
sass -- sledujte scssFiles : cssFilesSaas teraz sleduje všetky druhy úprav v adresári scssFiles.
Poznámka: Vyššie uvedený príkaz by sa mal vykonať na systémovom príkazovom riadku, pretože nebude fungovať na termináloch nástrojov, ako je kód Visual Studio.
Krok 4: Vytvorenie SCSS a zodpovedajúcich CSS súborov
V tomto kroku sa vytvorí prázdny súbor s názvom „ scssStyle “ s “ scss “ rozšírenie sa vytvorí v rámci “ scssFiles ” adresár:
Potom dva súbory s názvom „ scssStyle.css “ a „ scssStyle.css.map “ sa vytvorí automaticky pomocou “ sass “ modul vo vnútri “ cssFiles “, ako je uvedené nižšie:
Krok 5: Vloženie kódu
Nakoniec zadajte nejaký SCSS kód do „ scssStyle.scss ' ako je ukázané nižšie:
Teraz sa rovnaký kód vo formáte CSS automaticky vloží do „ scssStyle.css súbor:
Poďme si vizuálne ilustrovať krok 4 a 5 pomocou gif:
Táto príručka vysvetľuje kroky na vytvorenie projektu Node.js SASS\SCSS.
Záver
Ak chcete nastaviť rýchly projekt Node.js SASS/SCSS, najskôr nainštalujte modul “ sass ” a potom vytvorte dva adresáre, jeden pre “ SASS\SCSS “ súbor a ďalší pre “ CSS ” súbory. Potom urobte „ sass ” na sledovanie akejkoľvek zmeny v novovytvorených adresároch prostredníctvom “ sass – hodinky sass:css “príkaz. V dôsledku tejto akcie sa v priečinku „CSS“ automaticky vygeneruje súbor „SASS\SCSS“ a dva súbory „CSS“. Ak používateľ upraví súbory „SASS\SCSS“, nové zmeny sa automaticky vložia do súborov CSS. Táto príručka vysvetľuje úplný postup nastavenia projektu Node.js SASS\SCSS.