Použití preprocesorů CSS v aplikaci Dreamweaver

CSS je jazyk, který popisuje styl dokumentu HTML. Preprocesory CSS umožňují použít kód vytvořený v jazyce zpracovaném pomocí preprocesingu a kompilovat jej do oblíbené formy CSS. Preprocesované jazyky posouvají CSS na úroveň bližší programovacímu jazyku.

Konkrétně preprocesory umožňují používat proměnné, mixiny, funkce a mnoho dalších technik, které
nelze v CSS použít.Pomocí CSS preprocesorů můžete všechno definovat jednou a opakovaně to využívat, což vede k udržovatelnému a rozšiřitelnému CSS.

Pomocí preprocesoru CSS můžete také vytvářet čistší a snadno udržovatelné CSS. Pokud vytváříte webové stránky, které odkazují na řadu CSS souborů, použití CSS preprocesorů jako Sass nebo Compass může snížit manuální kódování a akce kopírování/vkládání.

Aplikace Dreamweaver používá vestavěný kompilátor Ruby-Saas pro kompilaci souborů typu SCSS a LESS. Dreamweaver také podporuje frameworky Compass a Bourbon pro kompilaci Sass souborů. 

LESS je založen na JavaScriptu, zatímco Sass je založen na Ruby. Vy však o žádném z těchto jazyků nemusíte nic vědět. Rovněž nemusíte používat příkazový řádek pro kompilaci souborů do podoby CSS. Dreamweaver automaticky kompiluje tyto soubory do CSS pomocí JavaScript knihovny less.js, když tyto soubory načtete, upravíte nebo uložíte.

Podporované verze:

• Sass: 3.4.25
• LESS: 2.7.2
• Compass: 1.0.3
• Bourbon: 4.2.6
• Bourbon Neat: 1.7.3
• Bourbon Bitters: 1.2.0

Jak aplikace Adobe Dreamweaver zachází s preprocesory CSS

Aplikace Dreamweaver zachází s preprocesory CSS v závislosti na tom, zda jste definovali web. Pokud definujete web produktu, můžete nastavit předvolby CSS preprocesoru a také používat frameworky Compass a Bourbon v aplikaci Dreamweaver.

Při definování webu můžete upravit způsob spolupráce preprocesorů CSS s aplikací Dreamweaver nastavením předvoleb preprocesorů CSS určených pro konkrétní weby. Pokud nastavíte předvolby preprocesorů CSS určené pro konkrétní weby, můžete zadat možnosti kompilace na základě webu. Můžete také přizpůsobit umístění Sass a CSS souborů a možnosti preprocesoru specifické pro každý web.

Přečtěte si, jak používat Dreamweaver s CSS preprocesory:

Aplikace Dreamweaver 2017 a preprocesory CSS

Ve verzi aplikace Dreamweaver 2017 je zabudována podpora CSS preprocesoru. To znamená, že můžete pracovat se soubory Sass/LESS/SCSS v rámci aplikace Dreamweaver. Jednoduché kroky jako Ctrl + S nebo Cmd + S vám v Dreamweaveru umožňují automatickou kompilaci souborů CSS. Jednotlivé soubory CSS lze také ručně kompilovat pomocí možností Nástroje > Kompilovat (nebo F9). Změny se také projeví ve všech otevřených HTML souborech, kde je tento kompilovaný CSS propojen nebo připojen.

Zde je obecný pracovní postup úkolů spojených s používáním CSS preprocesorů:

• Pokud chcete použít rozhraní Compass nebo Bourbon z aplikace Dreamweaver, nainstalujte příslušný kompilátor. Tato instalace se provádí jedním kliknutím. Nastavte své nastavení CSS preprocesoru.

Kompilátor nainstalujte pouze v případě, pokud chcete kopii souborů rozhraní (Bourbon), nebo chcete-li vygenerovat výchozí soubory scss a konfigurační soubory založené na Ruby (Compass). Doporučujeme ponechat si kopii souborů rozhraní. Pokud jsou určité mixiny nebo funkce z vývojářského frameworku odstraněny v pozdějších revizích, stále můžete přistupovat k souborům preprocesoru ve vašem webu.

• Ujistěte se, že je povolena automatická kompilace. Poté stiskněte Uložit pro aktualizaci CSS souborů.
• (Volitelné) Zobrazte změny, které se promítají v živém zobrazení nebo náhledu v reálném čase ve všech HTML stránkách, kde se používá generovaný CSS.

Aplikace Dreamweaver 2015 a preprocesory CSS

V aplikaci Dreamweaver 2015 a dřívějších verzích CC lze s pomocí aplikace Dreamweaver používat soubory Sass, LESS a SCSS. Museli jste však tyto soubory kompilovat sami mimo aplikaci Dreamweaver.
Váš pracovní postup by připomínal následující kroky:

1. Stáhněte a nainstalujte kompilátor.
2. Nastavte úlohu pro grunt (Gruntfile.js), aby kompilátor mohl číst váš soubor Sass/LESS/SCSS.
3. Nastavte další úlohu grunt pro kompilaci souboru do CSS, kterou následně přenesete do aplikace Dreamweaver.

Tyto kroky musíte provést pokaždé, když provedete změnu v souboru Sass/LESS/SCSS.

Pokud není web definován, můžete se rozhodnout pro ruční kompilaci souborů Sass a LESS. Podpora rozhraní Compass a Bourbon však není k dispozici.

Jak používat preprocesory CSS v aplikaci Dreamweaver?

Následuje pracovní postup úkolů na vysoké úrovni při používání CSS preprocesorů:

1. Definování webu v aplikaci Dreamweaver. Zajistěte, aby soubor LESS, který se snažíte kompilovat, byl umístěn v kořenové složce webu. Pokud jste web již definovali a soubor Sass/LESS je umístěn v kořenové složce webu, přejděte k dalšímu kroku. Další informace o nastavení webu v aplikaci Dreamweaver najdete v části Weby v aplikaci Dreamweaver.
2. Nastavte předvolby pro preprocesory CSS (například definujte umístění vygenerovaných souborů CSS). Tyto předvolby jsou určeny pro konkrétní web. Další informace najdete v části Nastavení předvoleb CSS preprocesorů specifických pro web.
3. Pokud chcete použít konkrétní rozhraní, například Compass nebo Bourbon, můžete zadat nastavení pro tato rozhraní. Další informace najdete zde: Používání frameworku Compass nebo Používání frameworku Bourbon.
4. Nastavte automatickou kompilaci nebo soubory Sass a LESS zkompilujte ručně. Další informace najdete v části Kompilace souborů CSS preprocesorů.

Nastavení předvoleb preprocesorů CSS

Můžete nastavit předvolby specifické pro web pro CSS preprocesory pomocí dialogového okna Weby > Spravovat weby.

Ponechání specifických předvoleb CSS preprocesoru určených pro konkrétní weby umožňuje spravovat vaše CSS preprocesory na základě webu. Tato akce vám také umožňuje kontrolovat CSS preprocesor pro každý web, aniž byste museli aktualizovat předvolby pokaždé, když přepnete weby.

Nastavení všeobecných předvoleb preprocesorů CSS

Následující všeobecné předvolby preprocesorů CSS lze nastavit v dialogovém okně Weby > Správa webů > Preprocesory CSS. Standardně jsou tato nastavení použitelná pro framework Saas.

Zaškrtnutím tohoto políčka povolte automatickou kompilaci preprocesorů CSS. Pokud vyberete tuto možnost, aplikace Dreamweaver automaticky při uložení souboru Sass, LESS nebo SCSS vygeneruje soubor CSS. Pokud tuto možnost necháte nezaškrtnutou, budete muset soubory kompilovat ručně pokaždé, když provedete změnu.

Možnosti LESS

Zpracovány budou pouze ty vzorce, které se nachází v závorkách. Například výraz (100px/25px) bude úspěšně zpracován, zatímco vzorec 20% + 10% (bez závorek) zpracován nebude. Když je tato možnost zakázána, všechny matematické výpočty v souboru jsou zpracovány.

Po vypnutí této možnosti se LESS bude pokoušet uhodnout matematické operace na výstupní jednotce. Například:

.class {

property: 1px * 2px;

}

V tomto případě délka vynásobená délkou určuje plochu, ale css nepodporuje zadání ploch. Aplikace Dreamweaver předpokládá, že uživatel zamýšlel, aby jedna z hodnot byla hodnota a ne jednotka délky.

Při zapnutých striktních jednotkách aplikace Dreamweaver předpokládá, že jde o chybu ve výpočtu, a vyvolá chybu.

Tato možnost vám umožňuje přepsat adresy URL v generovaném CSS souboru tak, aby byly adresy URL vždy relativní k vygenerovanému souboru. 

Vytvoří zdrojovou mapu. Source mapa je soubor, který překlenuje mezeru mezi jazyky vysoké úrovně jako Sass a LESS a jazyky nižší úrovně, do kterých se kompilují, jako například CSS.

Možnosti Sass/SCSS

Specifikuje styl výstupního CSS souboru:

• Vnořený - Formátuje kompilované CSS ve známé modulární struktuře.
• Kompaktní - Formátuje zkompilované CSS v kompaktní struktuře, která zabírá méně místa než Vnořené nebo Rozšířené.
• Komprimované - Výstup CSS v ploché struktuře.
• Rozšířený: upraví formátování výstupního souboru CSS na rozšířenou variantu, ve které je každá vlastnost a pravidlo na samostatném řádku. Vlastnosti jsou odsazeny v rámci pravidel, ale pravidla nejsou nijak odsazena. 

Vytváří komentáře ve výstupním CSS souboru, které mapují CSS kód na řádek, ze kterého byl vygenerován.

Vytváří zdrojovou mapu (soubor, který překlenuje mezeru mezi vysokoúrovňovými jazyky jako Sass a LESS a nízkoúrovňovým jazykem, do kterého se kompilují, jako je CSS). 

Nastavit předvolby zdroje a výstupu CSS

Můžete definovat, kam mají být umístěny vygenerované CSS soubory, a cestu, kterou má Dreamweaver sledovat a spustit automatickou kompilaci, když je soubor Sass/LESS v cestě upraven pomocí externího editoru.

Následující nastavení zdrojového a výstupního CSS preprocesoru můžete konfigurovat v dialogu Sites > Spravovat weby.

Výstup CSS

Zadejte umístění výstupního CSS souboru, který je generován.

Vyberte tuto možnost, pokud chcete, aby byly vygenerované CSS soubory uloženy ve stejné složce jako zdrojové soubory Sass a LESS.

Vyberte tuto možnost a zadejte složku, kam chcete uložit vygenerované CSS soubory.

Tato volba umožňuje nahradit část cesty pomocí řetězců Z a Do. Například při nastavení Z: scss a Do: css je výstupní soubor umístěn uvnitř stejné stromové struktury po nahrazení SCSS v cestě css.

Zadejte podsložku v kořenové složce webu, který je třeba sledovat. Obvykle tato podsložka obsahuje všechny vaše SCSS nebo LESS soubory. 

Pokud jste v nabídce Obecná nastavení povolili kompilaci, aplikace Dreamweaver automaticky spustí preprocesor CSS. Dreamweaver spustí automatickou kompilaci, když je jakýkoli soubor ve složce upraven externě nebo zevnitř aplikace Dreamweaver.

Použití rozhraní Compass

Compass je open-source framework pro tvorbu CSS, který vám umožňuje vytvářet CSS3 šablony stylů pomocí Sass.

Aplikace Dreamweaver nabízí podporu rozhraní Compass. Pokud vytváříte šablony stylů pomocí Compass, můžete tyto šablony stylů zkompilovat a vygenerovat CSS soubory zevnitř aplikace Dreamweaver.

Použití rozhraní Bourbon

Aplikace Dreamweaver podporuje řadu produktů Bourbon. Pokud vytváříte šablony stylů pomocí nástroje Bourbon, můžete tyto šablony stylů kompilovat a generovat soubory CSS z aplikace Dreamweaver.

Podporovány jsou následující varianty nástroje Bourbon:

• Bourbon - Jednoduchá a lehká směšovací knihovna pro Sass
• Bourbon Neat - Lehký sémantický mřížkový systém pro Sass a Bourbon
• Bourbon Bitters – předlohy stylů, proměnné a struktury pro projekty Bourbon

Framework Bourbon můžete importovat přidáním jednoho z následujících příkazů do kódu:

• @import "bourbon" – pro import Bourbon
• @import "neat" – pro import Bourbon Neat
• @import "base" – pro import Bourbon Bitter

Dreamweaver pak při kompilaci souborů preprocesoru používá zabalenou verzi Bourbon.

Případně můžete nainstalovat soubory rozhraní Bourbon na web, aby další aktualizace aplikace Dreamweaver neměly vliv na vaše pracovní postupy kompilace. Soubory rozhraní Bourbon se zkopírují na vaši stránku. Bourbon je framework, který se používá při spuštění kompilace libovolných souborů, které framework importují.

Instalace souborů Bourbon, Bourbon Neat nebo Bourbon Bitters

Instalace Bourbon nebo kterékoliv z jeho variant:

Kompilovat soubory preprocesoru CSS

Soubory preprocesoru CSS můžete kompilovat jedním z následujících způsobů:

• Nastavte automatickou kompilaci souborů preprocesoru CSS
• Ručně zkompilovat soubor preprocesoru CSS

Nastavte automatickou kompilaci souborů preprocesoru CSS

V aplikaci Dreamweaver lze nastavit možnosti automatického kompilování změn provedených v souboru rozhraní Sass nebo LESS do odpovídajícího CSS. Můžete také určit umístění (v rámci kořenového adresáře webu), kam chcete uložit generovaný CSS.

Po úspěšné kompilaci se na panelu Výstup (Okno > Výsledky > Výstup) zobrazí zpráva.Ikona stavu ve stavovém řádku se zobrazí zeleně.Zkompilovaný CSS otevřete dvojím kliknutím na zprávu o úspěchu na panelu.

Pokud se zobrazí chyby, kompilace CSS zřejmě byla neúspěšná. Stavová ikona se změní na červenou a na panelu Výstup se zobrazí všechny chyby a varování. Dvojím kliknutím na chybovou zprávu na panelu můžete rychle přejít na chybný řádek kódu. Soubor CSS není úspěšně zkompilován, dokud nejsou vyřešeny všechny chyby.

Po obdržení kompilovaného souboru CSS můžete svoji webovou stránku propojit se seznamem stylů. Případné provedené změny u preprocerosů CSS se automaticky projeví také u odpovídajících kompilovaných souborů CSS. Webová stránka se také automaticky obnovuje v živém zobrazení.

Další informace o propojení webové stránky se šablonou stylů naleznete v části Propojení s externí šablonou stylů CSS.

Soubor preprocesoru CSS zkompilujte ručně

V některých situacích (například pokud nemáte definovaný web aplikace Dreamweaver) možná budete chtít ručně zkompilovat soubor preprocesoru CSS.

V takových scénářích zakažte možnost Povolit automatickou kompilaci při uložení souboru na panelu CSS preprocesory > Obecné v dialogovém okně Nastavení webu.

Chcete-li ručně zkompilovat CSS preprocesor, klikněte pravým tlačítkem na soubor na panelu Soubory a klikněte na Kompilovat.

Můžete také kliknout na Nástroje > Kompilovat pro kompilaci aktuálního souboru.