Prepros je výkonný nástroj, který pomáhá vývojářům při zpracování a kompilaci zdrojového kódu. Umožňuje používat Sass (Syntactically Awesome Style Sheets) k vytvoření efektivnějšího a snadněji udržitelného CSS kódu. V tomto článku se podíváme na podrobný proces nastavení prepros pro práci se Sassem a ukážeme, jak co nejlépe využít jeho možnosti.
Krok 1: Prvním krokem je instalace prepros do počítače. Můžete si jej stáhnout z oficiálních stránek prepros.io a postupujte podle pokynů k instalaci. Po instalaci otevřete program a uvidíte uvítací okno.
Poznámka: Prepros je k dispozici pro operační systémy Windows a macOS.
Krok 2: Vytvořte nový projekt v prepros. Chcete-li to provést, klikněte na tlačítko "New Project" v levém horním rohu okna. Vyberte složku, do které budou uloženy vaše původní soubory, a nastavte název projektu. Pokud již máte projekt, můžete jej otevřít kliknutím na tlačítko "Open Project".
Krok 3: Vraťte se do hlavního okna prepros a ve spodní části obrazovky vyhledejte panel "Live Preview". Uvnitř tohoto panelu jsou karty pro různé programovací jazyky, jako je HTML, CSS a Sass. Klepnutím na kartu Sass upravíte kompilaci souboru .scss.
Pokračujte v nastavení prepros podle dalších pokynů a naučte se s tímto výkonným nástrojem dosahovat nejlepších výsledků při práci se Sass.
Co je prepros?
Prepros má mnoho užitečných funkcí, včetně automatické kompilace předprocesorového kódu do běžného CSS, detekce a opravy syntaktických chyb a okamžité aktualizace webové stránky při změně zdrojového kódu. To umožňuje vývojářům ušetřit čas a úsilí tím, že zvýší produktivitu a kvalitu jejich práce.
Prepros také podporuje mnoho dalších funkcí, včetně automatické optimalizace a komprese kódu, podpory předpon pro podporu prohlížeče, automatické kontroly syntaktických chyb a používání externích pluginů k rozšíření funkčnosti programu.
Kromě toho se prepros integruje s různými vývojovými médii, jako je Sublime Text, Visual Studio Code a Atom, což vývojářům umožňuje vybrat si nejpohodlnější prostředí pro práci s prepros a získat maximální výhody používání tohoto nástroje.
Výhody používání Sass
Zde je několik hlavních výhod používání Sass:
1. Možnost použití proměnných a mixinů. Sass umožňuje vytvářet proměnné pro ukládání hodnot, jako jsou barvy, písma nebo velikosti. To zjednodušuje a urychluje proces vývoje, protože změna hodnot proměnných se automaticky aplikuje na příslušné prvky stylů. Mixy umožňují seskupit styly do jednoho bloku a znovu je použít, díky čemuž je Kód modulárnější a snadno podporovatelný.
2. Příloha stylů. Do Sass lze vložit styly jednoho prvku do ostatních, díky čemuž je Kód přehlednější a strukturovanější. Například je možné sloučit styly pro konkrétní prvek s jeho pseudoelementy nebo třídami do jednoho bloku, což snižuje počet opakování a zlepšuje čitelnost kódu.
3. Importovat soubory. Sass vám umožňuje rozdělit styly do více souborů a importovat je na jednom místě. To je zvláště užitečné při navrhování velkých projektů, protože usnadňuje organizaci a rozdělení stylů podle funkčnosti. Změny v těchto souborech se automaticky vztahují na hlavní soubor stylů bez nutnosti ruční aktualizace.
4. Matematické operace. Sass umožňuje provádět matematické operace s jednotkami měření, díky čemuž je proces práce s rozměry a polohováním flexibilnější a pohodlnější.
5. Automatické generování CSS. Sass je kompilován do standardního CSS, který lze použít ve webovém projektu. To vám umožní využít všechny možnosti Sass během vývoje a poté jej převést na obvyklý CSS pro prohlížeče.
To jsou jen některé z výhod používání Sass. Díky svým výkonným schopnostem mohou vývojáři vytvářet efektivnější, modulární a flexibilní styly pro své webové projekty.
Instalace a konfigurace prepros
Chcete-li použít Sass s prepros, musíte provést několik kroků:
1. Stáhněte a nainstalujte prepros z oficiálních stránek prepros.io..
2. Po instalaci spusťte prepros. Budete požádáni o zadání e-mailové adresy. Zadejte svou adresu a klikněte na tlačítko Odeslat kód. Obdržíte e-mailem aktivační kód. Zadejte jej do prepros.
3. Vytvořte nový projekt v prepros zadáním cesty do složky se soubory Sass. Chcete-li to provést, klikněte na tlačítko "+" vlevo nahoře a vyberte možnost "Nový projekt". V okně, které se zobrazí, zadejte název projektu a cestu ke složce se soubory Sass.
4. V nastavení projektu vyberte možnost" Sass "nebo" SCSS " jako preprocesor. Chcete-li to provést, otevřete Nastavení projektu kliknutím na tlačítko "Nastavení" ve spodní části okna prepros. Na kartě procesory vyberte "Sass " nebo" SCSS", podle toho, jakou syntaxi dáváte přednost.
5. Nakonfigurujte výstupní cesty souborů CSS a JavaScript. V nastavení projektu přejděte na kartu výstup a zadejte cesty ke složkám, do kterých mají být soubory CSS a JavaScript vyloženy.
6. Klikněte na tlačítko Spustit v pravém horním rohu okna prepros. Poté bude prepros sledovat změny v souborech Sass a automaticky je kompilovat do příslušných CSS souborů.
Nyní jste připraveni použít prepros se Sass k vývoji webových aplikací. Dobrou práci!
Stažení a instalace prepros
- Přejděte na oficiální web prepros (https://prepros.io/) a stáhněte si instalační soubor pro váš operační systém (Windows, macOS nebo Linux).
- Spusťte instalační soubor a postupujte podle pokynů průvodce instalací.
- Po úspěšné instalaci otevřete prepros.
Nyní máte vše, co potřebujete pro práci se Sass v prepros. V další části se podíváme na to, jak nakonfigurovat projekt a začít používat Sass.
Konfigurace kompilace Sass v prepros
Krok 1: Nainstalujte prepros z oficiálních stránek. Po instalaci otevřete aplikaci.
Krok 2: Vytvořte nový projekt. Klikněte na " + " v levém horním rohu prepros a vyberte složku vašeho projektu.
Krok 3: V panelu Soubory projektu vyhledejte soubor s příponou.scss " nebo vytvořte nový, pokud ještě nemáte soubor Sass. Klikněte pravým tlačítkem na soubor a vyberte "Nastavení kompilace".
Krok 4: v okně Nastavení kompilace vyberte jako jazyk "Sass" a určete cestu k souboru CSS, do kterého se bude kompilovat váš soubor Sass. V případě potřeby můžete také upravit pokročilá nastavení kompilace.
Krok 5: Klikněte na tlačítko Uložit a zavřete okno Nastavení kompilace.
Krok 6: Klikněte na soubor Sass v panelu Soubory projektu a vyberte kompilovat pro spuštění procesu kompilace. Výsledek kompilace se zobrazí v panelu kompilace ve spodní části prepros.
Nyní jste nastavili prepros pro práci se Sass a můžete jej s jistotou použít ke kompilaci souborů Sass v CSS. To vám umožní efektivně pracovat se Sass a vytvářet stylové a moderní webové stránky.
Práce s projekty v prepros
Chcete-li vytvořit nový projekt v prepros, musíte postupovat podle následujících kroků:
- Otevřete prepros a klikněte na tlačítko "New Project" nebo z nabídky vyberte "File" > "New Project".
- Vyberte složku, ve které jsou soubory vašeho projektu, a pojmenujte ji, jak chcete.
- Vyberte typ projektu: "Static HTML", "WordPress Theme"nebo" Drupal Theme".
- Nakonfigurujte cesty k původním souborům a výstupním souborům pro různé typy souborů (např. HTML, CSS, JS).
- Vyberte Nastavení kombinace a Minifikace souborů, stahování v reálném čase a automatického restartu.
- Klikněte na tlačítko" Create Project " a váš nový projekt bude vytvořen.
Po vytvoření projektu k němu můžete přidat další zdrojové soubory, nakonfigurovat nastavení kompilace a optimalizace pro každý typ souborů a zobrazit historii změn a chybové logy. Prepros také poskytuje možnost Nastavení úloh sestavení a spouštění, které mohou automaticky zpracovávat vaše soubory při změně.
Vytvoření nového projektu v prepros
Chcete-li nastavit preprocesor Sass pomocí prepros, musíte vytvořit nový projekt. V této části se podíváme na to, jak vytvořit nový projekt v prepros a nakonfigurovat jej tak, aby fungoval se Sass.
- Otevřete prepros a klikněte na tlačítko Nový projekt v levém horním rohu.
- Zadejte cestu ke složce projektu kliknutím na tlačítko "Vyberte složku".
- Do pole Název projektu zadejte název projektu.
- Vyberte preprocesor Sass z rozevíracího seznamu "Typ preprocesoru".
- Zadejte cestu k souboru stylů Sass do pole "CSS vstup".
- Do pole "CSS výstup"zadejte cestu ke složce, do které budou soubory CSS kompilovány.
Po dokončení těchto kroků jste úspěšně vytvořili nový projekt v prepros a nakonfigurovali jej tak, aby fungoval se Sass. Nyní můžete začít psát Sass kód a automaticky jej kompilovat do CSS souborů pomocí prepros.
Přidání souborů Sass do projektu
Chcete-li pracovat se Sass v projektu, musíte přidat soubory s příponou .scss nebo .sass.
1. Vytvořte novou složku ve svém projektu a pojmenujte ji "sass" nebo vyberte složku, která již existuje pro ukládání souborů Sass.
2. Ve složce "sass" vytvořte nový soubor s rozšířením".scss "nebo".sass" (například " styles.scss "nebo" styles.sass").
3. Otevřete tento soubor v textovém editoru a začněte psát Sass kód.
4. Chcete-li připojit vytvořený soubor do dokumentu HTML, přidejte následující řádek kódu do sekce "head" vašeho souboru HTML:
- Pro Sass:
5. Po uložení změn v souboru Sass a spuštění Prepros automaticky zkompiluje Sass kód v CSS a vytvoří nový soubor s příponou .css. Tento soubor bude použit ve vašem projektu ke stylizaci webové stránky.