Jak nastavit rychlý projekt Node.js Sass/SCSS?

Tato příručka bude ilustrovat kompletní postup nastavení rychlého projektu Node.js SASS/SCSS.

Jak nastavit rychlý projekt Node.js Sass/SCSS?

SASS používá čisté vlastnosti CSS k provádění stylů nad vybraným prvkem. Zmocňuje původní CSS tím, že zahrnuje matematické a variabilní funkce. Aplikuje styl na DOM v hierarchii. Díky integraci SASS s Node.js může vývojář velmi snadno stylizovat projekt tak, aby byl poutavější a dokonalejší na pixely.

Podle níže uvedených kroků nastavte projekt Node.js podél SASS/SCSS.

Krok 1: Instalace „SASS“

Nejprve nainstalujte ' SASS “ globálně v projektu Node.js pomocí správce balíčků uzlů “ npm “ prostřednictvím tohoto příkazu:

Výstup ukazuje, že „ saas “ byl nainstalován balíček:

Krok 2: Vytvoření adresářů

Dále vytvořte samostatné adresáře pro soubory CSS a SCSS pomocí následujícího příkazu „mkdir“:

Je vidět, že výše uvedené „ mkdir 'příkaz vytvořil ' cssFiles ' a ' scssFiles ” adresáře:

Krok 3: Propojte modul SASS

Nyní použijte „ sass “, abyste sledovali případné změny v uložených souborech „ scssFiles “. V případě úpravy automaticky vytvoří CSS soubory uvnitř propojeného „ cssFiles ” a vložte stejná data scss do souboru CSS.

Příkaz, který se má provést pro sledování a propojení souboru „ sass “ modul je následující:

Nyní saas sleduje nejrůznější úpravy v adresáři scssFiles.

Poznámka: Výše uvedený příkaz by měl být proveden na systémovém příkazovém řádku, protože nebude fungovat na nástrojových terminálech, jako je kód Visual Studio.

Krok 4: Vytvoření SCSS a odpovídajících CSS souborů

V tomto kroku se vytvoří prázdný soubor s názvem „ scssStyle “ s “ scss “ rozšíření se vytvoří uvnitř “ scssFiles 'adresář:

Poté dva soubory s názvem „ scssStyle.css ' a ' scssStyle.css.map “ se automaticky vytvoří pomocí “ sass 'modul uvnitř ' cssFiles “, jak je uvedeno níže:

Krok 5: Vložení kódu

Nakonec zadejte nějaký SCSS kód do „ scssStyle.scss ' Jak je ukázáno níže:

Nyní se stejný kód ve formátu CSS automaticky vloží do „ scssStyle.css 'soubor:

Pojďme si vizuálně ilustrovat krok 4 a 5 pomocí gif:

Tato příručka vysvětluje kroky k vytvoření projektu Node.js SASS\SCSS.

Závěr

Chcete-li nastavit rychlý projekt Node.js SASS/SCSS, nejprve nainstalujte modul „ sass “ a poté vytvořte dva adresáře, jeden pro „ SASS\SCSS “ soubor a další pro “ CSS ” soubory. Poté vytvořte „ sass ” pro sledování jakýchkoli změn v nově vytvořených adresářích prostřednictvím “ sass – hodinky sass:css “příkaz. Výsledkem této akce je automatické vygenerování souboru „SASS\SCSS“ a dvou souborů „CSS“ ve složce „CSS“. Pokud uživatel upraví soubory „SASS\SCSS“, nové změny se automaticky vloží do souborů CSS. Tato příručka vysvětluje úplný postup nastavení projektu Node.js SASS\SCSS.