Sass je výkonná rozšírenie CSS, ktoré ti umožňuje jednoduchšie a efektívnejšie spravovať tvoje štýlové súbory. Aby si mohol používať Sass súbory, musia byť však prevedené na bežné CSS súbory. V tomto tutoriále ti ukážeme, ako môžeš kompiláciu Sass do CSS efektívne zvládnuť pomocou jednoduchých príkazov a automatizácií.
Najdôležitejšie zistenia
- Sass musí byť preconvertovaný na CSS súbory, aby bol použitý.
- Pomocou príkazu Watch môžeš automaticky sledovať zmeny v Sass súboroch a prevádzať ich na CSS súbory.
- Dobrá štruktúra súborov je kľúčová pre efektívnu prácu so Sass a CSS.
Krok za krokom návod
1. Počiatočná konverzia Sass do CSS
Najprv sa musíš uistiť, že si v správnom adresári, kde je uložený tvoj Sass súbor. Napríklad, ak je tvoj súbor v adresári "C:\tutkit", naviguj na toto miesto.
Ako prvé otvoríš terminál a zadaš nasledujúci príkaz, pričom tvojeSúbor.scss je názov tvojho Sass súboru a tvojaVýstupnáSúbor.css je názov požadovaného CSS výstupného súboru:
sass tvojeSúbor.scss tvojaVýstupnáSúbor.css
Tento príkaz prevedie Sass súbor na príslušný CSS súbor. Pozri si, že názvy súborov nemusia byť identické. Môžeš pomenovať výstupný súbor podľa svojich želaní.
2. Automatizácia kompilácie
Aby si nemusel zakaždým manuálne zadávať príkaz konverzie, môžeš použiť príkaz Watch. Tento príkaz sleduje Sass súbor a automaticky vykoná konverziu, hneď ako dôjde k zmene.
Zadaj nasledujúci príkaz na aktiváciu sledovania:
sass --watch tvojeSúbor.scss:tvojaVýstupnáSúbor.css
Ako to urobíš, uvidíš potvrdenie, že sledovanie bolo spustené. Teraz, zakaždým, keď zmeníš svoj Sass súbor, CSS súbor sa automaticky aktualizuje.
3. Sledovanie viacerých súborov
Povedzme, že pracuješ na viacerých Sass súboroch v jednom adresári. V takom prípade je užitočné sledovať celý adresár. Najprv sa naviguj von zo svojho aktuálneho adresára a zadaj nasledujúci príkaz:
sass --watch tutkit/scss: tutkit/css
Tento príkaz teraz sleduje celý adresár scss a prevádza všetky zmeny v príslušných súboroch v adresári css.
4. Organizovanie tvojich Sass súborov
Aby si mal poriadok vo svojom projekte, mal by si vytvoriť jasnú štruktúru adresárov. Vytvor adresár scss pre svoje Sass súbory a samostatný adresár css pre výstupné súbory. To uľahčuje údržbu a zabezpečuje, že všetko zostane organizované.
Takže najprv si vytvorime náš adresár:
Vytvor nový adresár s názvom scss:
mkdir scss
A ďalší adresár s názvom css:
mkdir css
Teraz môžeš uložiť všetky svoje Sass súbory do adresára scss a generované CSS súbory zapisovať do adresára css.
5. Automatizované sledovanie adresárov
Akonáhle sú tvoje adresáre nastavené, môžeš príkazať SAS, aby sledoval všetky zmeny v tvojom adresári scss a aktualizoval príslušné CSS súbory. Použi nasledujúci príkaz:
sass --watch scss:css
Teraz SAS bude sledovať, či dochádza k zmenám v rámci adresára scss, a automaticky vytvárať alebo aktualizovať príslušné CSS súbory v adresári css.
Zhrnutie – Zručná kompilácia Sass do CSS
Automatizovaním kompilácie Sass môžeš ušetriť čas použitím jasnej a premyslenej štruktúry priečinkov a použitím príkazu Watch na okamžité overenie zmien. Takto máš vždy istotu, že tvoje najnovšie zmeny sa odrážajú aj v CSS súbore.
