Vývoj webových aplikací se stal neuvěřitelně populární činností a mnoho vývojářů se snaží najít nejúčinnější nástroje a technologie pro vytváření stylových a flexibilních webových stránek. SASS (Syntactically Awesome Style Sheets) je výkonný precesor CSS, který poskytuje mnoho možností a vylepšení pro práci s CSS kódem.
Pokud používáte Visual Studio Code jako své hlavní vývojové prostředí, pak můžete snadno připojit SASS ke svým HTML souborům. To vám umožní napsat CSS kód na SASS a poté jej převést na běžný CSS pro použití ve vaší webové aplikaci.
Chcete-li připojit SASS k HTML ve Visual Studio Code, budete muset nainstalovat doplněk Live Sass Compiler. Toto rozšíření automaticky kompiluje vaše SASS soubory v CSS, když je uložíte. Poskytuje také funkce pro sledování a automatickou rekompilaci souborů při jejich změně.
Jakmile nainstalujete Live Sass Compiler, musíte jej nakonfigurovat pro svůj projekt. Chcete-li to provést, vytvořte soubor .vscode/settings.json je kořenem vašeho projektu. V tomto souboru zadejte cestu k souboru SASS a cestu k souboru CSS, který chcete. Poté otevřete soubor HTML a povolte soubor CSS jako obvykle.
První kroky
Než začnete používat SASS v souboru HTML, musíte se ujistit, že máte nainstalované následující komponenty:
- Node.js
- npm (Dodává se s Node.js)
Po úspěšné instalaci těchto komponent, můžete začít instalovat SASS. Budete muset otevřít příkazový řádek nebo terminál a spustit následující příkaz:
npm install -g sass
Tento příkaz nainstaluje SASS globálně na Váš stroj, což umožní jeho použití z libovolného adresáře.
Po instalaci SASS, můžete vytvořit svůj první soubor stylů s příponou .scss nebo .sass. Můžete například vytvořit soubor styles.scss, ve kterém budete psát své styly.
Nyní můžete svůj soubor stylů připojit k souboru HTML. K tomu budete muset přidat další položku do sekce head vašeho HTML souboru:
Všimněte si, že místo stylů.CSS musíte zadat cestu k vašemu kompilovanému souboru CSS, který bude vytvořen po spuštění příkazu sestavení SASS.
Nyní váš soubor HTML použije styly z vašeho .scss nebo .sass soubor.
V následujících sekcích se podíváme podrobněji na proces práce se SASS ve Visual Studio Code a jak jej nakonfigurovat pro automatickou kompilaci v CSS.
Instalace Visual Studio Code
Chcete-li stáhnout Visual Studio Code, musíte přejít na oficiální webové stránky vývojářů pomocí odkazu: https://code.visualstudio.com/.
Na domovské stránce webu budou nabízeny verze Visual Studio Code pro různé operační systémy. Musíte vybrat verzi, která odpovídá vašemu systému, a kliknout na tlačítko "Stáhnout".
| Windows | Linux | macOS |
Po stažení instalačního souboru je nutné jej spustit a postupovat podle pokynů instalačního programu. Proces instalace obvykle nevyžaduje žádné zvláštní nastavení a trvá několik minut.
Po úspěšné instalaci bude možné spustit Visual Studio Code. Editor nabízí uživatelsky přívětivé rozhraní, podporu různých programovacích jazyků a také možnost přidávat pluginy pro rozšíření funkčnosti.
Nyní jste připraveni začít ve Visual Studio Code a použít jej k vývoji webových stránek s připojeným Sassem.
Instalace pluginu SASS
Chcete-li připojit SASS k HTML ve Visual Studio Code, musíte nainstalovat plugin SASS, který poskytne podporu pro jazyk SASS v editoru. Postupujte podle pokynů:
- Otevřete Visual Studio Code.
- Klikněte na ikonu "Extensions" v postranním panelu vlevo nebo použijte klávesovou zkratku Ctrl+Shift+X.
- Do vyhledávacího pole zadejte "SASS" a stiskněte Enter.
- Vyberte plugin " Sass "od vývojáře" Robin Bentley "a klikněte na tlačítko"Install".
Po instalaci pluginu, Visual Studio Code bude podporovat SASS a poskytne možnost automatické kompilace SASS v CSS během ukládání souboru. Nyní jste připraveni použít SASS ve svém projektu!
Vytvoření projektu
Než začnete připojovat SASS k HTML ve Visual Studio Code, budete muset vytvořit projekt, který bude obsahovat všechny potřebné soubory.
Chcete-li začít, otevřete Visual Studio Code a vytvořte novou složku, ve které bude váš projekt umístěn. Složku můžete pojmenovat, jak chcete, důležité je, aby to byl smysluplný název.
Jakmile je složka vytvořena, otevřete ji ve Visual Studio Code. Chcete - li to provést, v programu vyberte Soubor-Otevřít složku a vyberte složku projektu.
Nyní musíte vytvořit více souborů, které budou použity v projektu. Jedním z nich by měl být hlavní soubor HTML, se kterým bude váš projekt začínat. Můžete vytvořit soubor s příponou .html a pojmenovat ho, jak chcete. Tento soubor bude vstupním bodem pro váš projekt.
Budete také potřebovat soubor stylů s příponou .scss, který bude obsahovat celý váš SASS kód. Tento soubor můžete vytvořit a pojmenovat, jak chcete. Budete také muset vytvořit soubor s příponou .css, který bude obsahovat zkompilovaný CSS kód na základě vašeho SASS kódu.
Jakmile jsou všechny potřebné soubory vytvořeny, jste připraveni začít připojovat SASS k HTML ve Visual Studio Code.
Vytváření souborů
Chcete-li připojit SASS k HTML ve Visual Studio Code, musíte vytvořit více souborů:
- index.html - hlavní soubor HTML, který připojí styly ze SASS;
- style.scss - soubor SASS, který bude psát styly pro html stránku;
- style.css - soubor CSS, který bude výsledkem kompilace souboru SASS.
Vytvořte novou složku projektu a v ní vytvořte soubory index.html, style.scss a style.CSS pomocí editoru kódu ve Visual Studio Code nebo jakéhokoli jiného textového editoru.
Poznámka: názvy souborů lze libovolně vybrat, ale mějte na paměti soubor style.scss musí být kompilován do souboru style.css.
Připojení SASS k HTML
Chcete-li použít SASS v HTML souboru, musíte nejprve nainstalovat SASS a nakonfigurovat projekt.
- 1. Instalace SASS:
- Prvním krokem je instalace SASS. To lze provést instalací SASS pomocí npm (node package manager). Chcete-li to provést, otevřete příkazový řádek a spusťte příkaz: npm install-g sass
- 2. Vytvoření souboru SASS:
- Po instalaci SASS vytvořte nový soubor s příponou .scss. Toto bude váš původní soubor SASS, do kterého budete psát své styly.
- 3. Kompilace souboru SASS:
- Jakmile vytvoříte soubor SASS, musíte jej zkompilovat do CSS, aby mu prohlížeč porozuměl. Chcete-li kompilovat soubor SASS v CSS, spusťte příkaz na příkazovém řádku: sass --watch style.scss:style.CSS kde style.scss je cesta k původnímu souboru SASS, ale style.css je cesta k vašemu kompilovanému souboru CSS.
- 4. Připojení kompilovaného CSS souboru k HTML:
- Jakmile zkompilujete soubor SASS, musíte jej připojit k souboru HTML. Chcete-li to provést, použijte značku s atributem href, který ukazuje cestu k vašemu kompilovanému souboru CSS:
Nyní by vaše SASS styly měly být aplikovány na váš HTML soubor.
Sestavení projektu a použití SASS
Pro použití SASS v projektu je třeba provést několik kroků. Před zahájením práce se ujistěte, že máte nainstalovaný Node.js a Visual Studio Code.
1. Ve svém projektu vytvořte složku, která bude obsahovat soubory SASS. Pojmenujte ji "sass" nebo jakýkoli jiný pohodlný název.
2. Otevřete Visual Studio Code a otevřete tuto složku. Ve VS Code otevřete terminál (View > Terminal) a spusťte následující příkaz:
3. Po provedení příkazu otevřete soubor package.json, který byl vytvořen ve složce projektu. V části "scripts" přidejte následující řádek:
"build": "sass sass/style.scss style.css"
4. Nyní nainstalujte SASS příkazem:
npm install sass --save-dev
5. Chcete-li použít SASS, vytvořte soubor "style.scss " ve složce sass. V tomto souboru můžete psát kód na SASS.
6. Pro kompilaci SASS v CSS použijte příkaz:
Příkaz provede kompilaci souboru " style.scss "a vytvoří" style.css " v kořenové složce projektu.
7. Chcete-li automaticky kompilovat SASS do CSS při změně souborů, použijte příkaz:
sass --watch sass/style.scss style.css
Nyní můžete použít CSS soubor " style.css " ve svém HTML projektu.
Tímto způsobem jste úspěšně připojili a použili SASS ve svém projektu.