Prepros - výkonný nástrojový software, který vám pomůže urychlit vývoj webových stránek. S ním můžete použít preprocesor Sass, který výrazně zjednodušuje a zlepšuje proces psaní CSS kódu. Pokud právě začínáte svou cestu ve vývoji webu, nastavení Prepros pro použití Sass se může zdát jako obtížný úkol. Ale nebojte se! V tomto podrobném návodu vám řekneme, jak nastavit Prepros pro použití Sass a začít pohodlně a efektivně psát kód.
Sass (Syntactically Awesome Style Sheets) - je to rozšiřující jazyk CSS, který přidává mnoho funkcí a funkcí, které nejsou k dispozici v běžném CSS. Umožňuje použití proměnných, funkcí, příloh pravidel, mixinů a dalších. Sass pomáhá výrazně snížit počet kódu CSS a zjednodušit jeho strukturu. Prepros je nástroj, který usnadňuje proces kompilace, komprese a optimalizace souborů Sass.
Než začnete, ujistěte se, že máte v počítači nainstalovaný Prepros. Můžete si jej stáhnout z oficiálních stránek a nainstalovat podle pokynů na obrazovce.
Instalace a konfigurace prostředí
Než začnete s Prepros a Sass, budete muset nainstalovat a nakonfigurovat více komponent:
1. Nainstalujte Prepros do počítače. Prepros si můžete stáhnout z jeho oficiálních stránek.
2. Nainstalujte Sass. Sass můžete nainstalovat pomocí pokynů na oficiálních stránkách Sass. Pokud používáte Mac, měli byste již mít nainstalovaný Ruby, takže musíte v terminálu jednoduše spustit příkaz. Pokud používáte Windows, budete muset nainstalovat Ruby a poté spustit příkaz.
3. Nakonfigurujte Prepros pro práci se Sass. Otevřete Prepros a vytvořte nový projekt. Na kartě Nastavení nastavte cestu k nainstalovanému kompilátoru Sass.
4. Vytvořte soubory Sass. Ve složce vašeho projektu vytvořte nový soubor s příponou .sass nebo .scss a začněte psát svůj kód Sass.
5. Nastavte kompilaci Sass. V nastavení projektu vyberte možnost kompilace Sass a vyberte cestu pro uložení souborů kompilovaných CSS.
Po dokončení těchto kroků bude vaše okolí plně připraveno pro práci s Prepros a Sass. Můžete začít psát a kompilovat svůj kód Sass a Prepros bude automaticky aktualizovat vaše CSS soubory při každém uložení.
Vytvoření nového projektu v prepros
- Spusťte aplikaci prepros v počítači.
- Na domovské obrazovce aplikace klikněte na tlačítko" New project " (nový projekt).
- Vyberte složku, ve které bude váš projekt umístěn.
- Zadejte název projektu a vyberte jazyk používaný v projektu (například Sass).
- Nakonfigurujte cestu pro shromážděné soubory (obvykle se jedná o složku "dist" nebo "build", která bude obsahovat hotové soubory po kompilaci).
- Zadejte cesty k souborům, které chcete kompilovat (například soubory s příponou .scss pro Sass).
- Vyberte možnosti kompilace a optimalizace (např. komprese kódu, automatická aktualizace stránky při změně souborů).
- Kliknutím na tlačítko" Create project " (vytvořit projekt) vytvoříte nový projekt.
Po vytvoření projektu uvidíte seznam souborů na levé straně aplikace. Můžete přidávat nové soubory, upravovat stávající a sledovat kompilaci a optimalizaci kódu v reálném čase. Prepros také poskytuje řadu dalších funkcí, jako je Minifikace CSS a JS, automatické přidávání předpon vendor a další, což z něj dělá skvělou volbu pro práci se Sass a dalšími preprocesory.
Import a strukturování souborů
Při použití Sass v Prepros máme k dispozici funkci importu souborů. To nám umožňuje rozdělit náš stylový kód na mnoho samostatných souborů a importovat je do jednoho hlavního souboru.
Při importu souborů do Sass lze použít následující konstrukci:
@import 'имя-файла';Pokud je soubor s importovaným názvem ve stejném adresáři jako hlavní soubor, můžete zadat pouze jeho název bez přípony. Pokud je soubor v jiném adresáři, označíme celou cestu k souboru vzhledem k hlavnímu souboru.
Soubory lze importovat kdekoli v hlavním souboru, ale obvykle jsou importy umístěny na samém začátku souboru.
Při importu souborů, Prepros při sestavování automaticky odhalí všechny importy a shromažďuje jejich obsah do jednoho souboru.
Importem lze také vytvořit strukturu souborů pro pohodlnější separaci stylového kódu. Můžete například vytvořit samostatný adresář pro základní styly a importovat je odděleně od stylů komponent. Tato struktura souborů usnadňuje orientaci v projektu a usnadňuje podporu kódu.
Při používání importu souborů je důležité vzít v úvahu pořadí importu a možné závislosti mezi soubory. Nesprávné pořadí importu může vést k chybám při kompilaci a nesprávnému zpracování stylů. Při importu souborů se doporučuje dodržovat určitá pravidla, například importovat soubory s proměnnými a Mixy na začátku souboru a styly komponent na konci.