Použití souborů Compass.
Pokud není rozhraní Compass již nainstalováno, lze je nainstalovat z aplikace Dreamweaver.
Naposledy aktualizováno
19. 5. 2021
- Příručka uživatele aplikace Dreamweaver
- Úvod
- Dreamweaver a Creative Cloud
- Pracovní plochy a zobrazení aplikace Dreamweaver
- Nastavení webů
- O webech aplikace Dreamweaver
- Nastavení lokální verze webu
- Připojení k publikačnímu serveru
- Nastavení testovacího serveru
- Import a export nastavení webu aplikace Dreamweaver
- Přenos stávajících webových stránek ze vzdáleného serveru do kořenové složky lokálního webového místa
- Funkce usnadnění přístupu v aplikaci Dreamweaver
- Rozšířená nastavení
- Nastavení předvoleb webového místa pro přenos souborů
- Úprava nastavení serveru proxy v aplikaci Dreamweaver
- Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
- Používání systému Git v aplikaci Dreamweaver
- Správa souborů
- Vytváření a otevírání souborů
- Správa souborů a složek
- Získání souborů ze serveru a odeslání souborů na server
- Zpřístupnění/vyhrazení souborů
- Synchronizace souborů
- Porovnání souborů a nalezení rozdílů
- Maskování souborů a složek ve webu aplikace Dreamweaver
- Povolení poznámek k návrhu pro weby Dreamweaver
- Předcházení potenciálnímu zneužití modulu Gatekeeper
- Rozvržení a návrh
- Používání vizuálních pomůcek pro rozvržení
- O používání souborů CCS k rozvržení stránky
- Navrhování responzivních webů pomocí nástroje Bootstrap
- Vytvoření a používání multimediálních dotazů v aplikaci Dreamweaver
- Zobrazení obsahu pomocí tabulek
- Barvy
- Responzivní návrh s využitím rozvržení s plovoucí mřížkou
- Funkce Extrakt v aplikaci Dreamweaver
- CSS
- Vysvětlení kaskádových seznamů stylů
- Rozvržení stránek pomocí panelu CSS Designer
- Použití preprocesorů CSS v aplikaci Dreamweaver
- Postup nastavení předvoleb stylu CSS v aplikaci Dreamweaver
- Přesunutí pravidel CSS v aplikaci Dreamweaver
- Převedení inline CSS na pravidlo CSS v aplikaci Dreamweaver
- Práce s tagy div
- Použití přechodů na pozadí
- Vytváření a úprava efektů přechodů v aplikaci Dreamweaver
- Formátování kódu
- Obsah stránky a datové zdroje
- Nastavení vlastností stránky
- Nastavení vlastností nadpisů CSS a vlastností odkazu CSS
- Práce s textem
- Vyhledání a nahrazení textu, tagů a atributů
- Panel DOM
- Úpravy v živém zobrazení
- Kódování dokumentů v aplikaci Dreamweaver
- Výběr a zobrazení elementů v okně dokumentu
- Nastavení vlastností textu v Inspektoru vlastností
- Kontrola pravopisu webové stránky
- Pomocí vodorovných linek v aplikaci Dreamweaver
- Přidání a úprava kombinací písma v aplikaci Dreamweaver
- Práce s datovými zdroji
- Vložení a aktualizace dat v aplikaci Dreamweaver
- Vytvoření a správa oblíbených datových zdrojů v aplikaci Dreamweaver
- Vložení a úprava obrázků v aplikaci Dreamweaver
- Přidání multimediálních objektů
- Přidání videa v aplikaci Dreamweaver
- Vložení videa HTML 5
- Vložit soubory SWF
- Přidání zvukových efektů
- Vložte zvuk HTML5 v aplikaci Dreamweaver
- Práce s položkami knihoven
- Používání arabského a hebrejského textu v aplikaci Dreamweaver
- Odkazy a navigace
- Ovládací prvky a efekty jQuery
- Kódování webových stránek
- Informace o psaní kódu v aplikaci Dreamweaver
- Prostředí pro psaní kódu v aplikaci Dreamweaver
- Nastavení předvoleb kódování
- Přizpůsobení barevného zvýraznění kódu
- Psaní a úprava kódu
- Našeptávání kódu a dokončování kódu
- Sbalení a rozbalení kódu
- Opakované použití kódu v podobě výstřižků
- Linting kódu
- Optimalizace kódu
- Úprava kódu v zobrazení Návrh
- Práce s obsahem hlavičky stránek
- Vložení zahrnutí na straně serveru v aplikaci Dreamweaver
- Používání knihoven tagů v aplikaci Dreamweaver
- Import vlastních tagů do aplikace Dreamweaver
- Práce s funkcemi JavaScriptu (obecné pokyny)
- Použití vestavěných chování jazyka JavaScript
- O XML a XSLT
- Provádění transformace XSL na straně serveru v aplikaci Dreamweaver
- Provádění transformace XSL na straně klienta v aplikaci Dreamweaver
- Přidání entit znaku pro XSLT v aplikaci Dreamweaver
- Formátování kódu
- Pracovní postupy pro různé produkty
- Instalace a používání rozšíření v aplikaci Dreamweaver
- Aktualizace v rámci aplikace v aplikaci Dreamweaver
- Vkládání dokumentů sady Microsoft Office v aplikaci Dreamweaver (jen ve Windows)
- Práce s aplikacemi Fireworks a Dreamweaver
- Úprava obsahu na webech Dreamweaver za pomoci aplikace Contribute
- Integrace mezi aplikacemi Dreamweaver a Business Catalyst
- Vytváření e-mailových kampaní na míru
- Šablony
- O předlohách aplikace Dreamweaver
- Rozpoznání předloh a dokumentů založených na předloze
- Vytvoření předlohy aplikace Dreamweaver
- Vytváření upravitelných oblastí v šablonách
- Vytváření opakovaných oblastí a tabulek v aplikaci Dreamweaver
- Použijte volitelné oblasti v předlohách
- Definování upravitelných atributů tagu v aplikaci Dreamweaver
- Postup vytvoření vnořených šablon v aplikaci Dreamweaver
- Úprava, aktualizace nebo odstranění předloh
- Export a import obsahu XML v aplikaci Dreamweaver
- Aplikace nebo odstranění předlohy z existujícího dokumentu.
- Úprava obsahu v předlohách Dreamweaver
- Pravidla syntaxe pro tagy předloh v aplikaci Dreamweaver
- Nastavení předvoleb zvýraznění pro oblasti předlohy
- Výhody používání předloh v aplikaci Dreamweaver
- Mobilní zařízení a zařízení s více displeji
- Dynamické weby, stránky a webové formuláře
- Informace o webových aplikacích
- Nastavení počítače pro vývoj aplikací
- Řešení problémů s připojením databází
- Odstranění skriptů připojení v aplikaci Dreamweaver
- Návrh dynamických stránek
- Přehled zdrojů dynamického obsahu
- Definice zdrojů dynamického obsahu
- Přidání dynamického obsahu na stránky
- Změna dynamického obsahu v aplikaci Dreamweaver
- Zobrazení záznamů databáze
- Zajišťování a řešení potíží s živými daty v aplikaci Dreamweaver
- Přidání uživatelského chování serveru v aplikaci Dreamweaver
- Vytváření formulářů pomocí aplikace Dreamweaver
- Shromažďování informací od uživatelů pomocí formulářů
- Vytváření a povolení formulářů ColdFusion v aplikaci Dreamweaver
- Vytváření webových formulářů
- Rozšířená podpora formátu HTML5 pro elementy formuláře
- Vytváření formuláře pomocí aplikace Dreamweaver
- Vizuální vytváření aplikací
- Vytváření hlavních a podrobných stránek v aplikaci Dreamweaver
- Vytváření vyhledávacích stránek a stránek s výsledky
- Vytvoření stránky vložení záznamu
- Vytvoření stránky pro aktualizaci záznamu v aplikaci Dreamweaver
- Budování stránek pro odstranění záznamu v aplikaci Dreamweaver
- Používání příkazů ASP k úpravě databáze v aplikaci Dreamweaver
- Vytvoření registrační stránky
- Vytvoření přihlašovací stránky
- Vytvoření stránky, na kterou mají přístup pouze autorizovaní uživatelé
- Zabezpečení složek ve službě ColdFusion pomocí aplikace Dreamweaver
- Používání komponent ColdFusion v aplikaci Dreamweaver
- Testování, náhled a publikování webových stránek
- Odstraňování problémů
Zjistěte, jak lze v aplikaci Dreamweaver pracovat se soubory preprocesoru CSS a jak je kompilovat.
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. Jazyky zpracované pomocí preprocesingu přenáší CSS blíže k úrovni programovacích jazyků.
Preprocesory konkrétně umožňují používat proměnné, kombinace, funkce a řadu dalších technik, které
ve formě CSS nejsou dostupné. Při použití preprocesorů je možné definovat vše současně a opakovaně používat tyto definice. Výsledkem je CSS se snadnou údržbou a rozšiřitelností.
Pomocí preprocesoru CSS můžete také vytvářet čistší a snadno udržovatelné CSS. Pokud vytváříte webové stránky, které odkazují na soubory CSS, pomocí preprocesorů CSS jako například Sass nebo Compass, můžete snížit počet aktivit zahrnujících manuální kódování a kopírování/vkládání.
Aplikace Dreamweaver používá vestavěný kompilátor Ruby-Saas pro kompilaci souborů typu SCSS a LESS. Aplikace Dreamweaver také podporuje rozhraní Compass a Bourbon ke kompilování souborů Sass.
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. Aplikace Dreamweaver tyto soubory při jejich načtení, úpravě nebo uložení automaticky kompiluje do podoby CSS prostřednictvím knihovny less.js JavaScript.
Podporované verze produktů:
- 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, můžete nastavit předvolby preprocesoru CSS a také použít rozhraní Compass a Bourbon z aplikace 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é upravit umístění souborů Sass a CSS a možnosti preprocesoru konkrétní pro každý web.
Přečtěte si, jak používat aplikaci Dreamweaver s preprocesory CSS:
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 rovněž projeví ve všech otevřených souborech HTML, kde je tato kompilovaná podoba CSS propojena nebo připojena.
Následuje pracovní postup vysoké úrovně souvisejících úloh při použití preprocesorů CSS:
- 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 všeobecné předvolby preprocesorů CSS.
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 některé funkce nebo směšování při pozdějších revizích v rámci příkazového rozhraní odstraněny, preprocesor můžete stále zpřístupnit prostřednictvím vašeho webu.
- Ujistěte se, že je povolena automatická kompilace. Poté stiskněte tlačítko Uložit, čímž aktualizujete soubory CSS.
- (Volitelné) Zobrazte provedené změny v živém náhledu nebo náhledu v reálném čase na všech stránkách HTML, kde je použit 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. Tyto soubory však musíte kompilovat mimo aplikaci Dreamweaver.
Vaše pracovní postupy by se měly podobat následujícím krokům:
- Stáhněte a nainstalujte kompilátor.
- Pro čtení souborů Sass/LESS/SCSS nastavte pro kompilátor úlohu grunt (Gruntfile.js).
- Aby se soubor zkompiloval do CSS, nastavte jinou gruntovou úlohu, kterou poté převedete do Dreamweaveru.
Tyto kroky musíte provést při každé změně souboru Sass/LESS/SCSS.
Poznámka:
Informace o možnostech rozšíření vašeho CSS za použití preprocesorů naleznete na tomto výukovém videu.
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 vysoké úrovně souvisejících úloh při použití preprocesorů CSS:
- 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 aplikace Dreamweaver naleznete v tématu O webech aplikace Dreamweaver.
- 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 naleznete v tématu Nastavení předvoleb preprocesorů CSS určených pro konkrétní weby.
- Pokud chcete použít konkrétní rozhraní, například Compass nebo Bourbon, můžete zadat nastavení pro tato rozhraní. Další informace naleznete v tématu: Použití rozhraní Compass nebo Použití rozhraní Bourbon.
- Nastavte automatickou kompilaci nebo soubory Sass a LESS zkompilujte ručně. Další informace naleznete v tématu Kompilace souborů preprocesorů CSS.
Nastavení předvoleb preprocesorů CSS
Předvolby preprocesorů CSS pro konkrétní web lze nastavit pomocí dialogového okna Weby > Správa webů.
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 rovněž poskytuje kontrolu nad preprocesorem CSS pro každý web bez nutnosti aktualizovat předvolby při každém přepnutí stránek.
Poznámka:
Nastavení v podsystémech Všeobecné a Zdroj a výstup jsou standardně použitelné i pro rozhraní Ruby-Saas.
Chcete-li nastavit předvolby pro rozhraní Compass, musíte vybrat zaškrtávací políčko Použít Compass v sekci Compass .
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. Ve výchozím nastavení jsou tato nastavení použitelná pro rozhraní Saas.
Povolit automatickou kompilaci při uložení souboru
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 nevyberete, bude nutné soubory ručně kompilovat po každé provedené změně.
Možnosti LESS
Povolit režim Strict Math
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. Pokud je tato možnost zakázána, budou zpracovány všechny vzorce v souboru.
Povolit režim Strict Units
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. Proto Aplikace Dreamweaver předpokládá, že uživatel považuje jednu z hodnot za hodnotu a nikoliv za jednotku délky.
Pokud je režim Strict units povolen, aplikace Dreamweaver jej považuje za chybu ve výpočtu a vyvolá chybu.
Přepsat adresy URL na relativní
Touto možností lze přepsat adresy URL ve vygenerovaném souboru CSS tak, že adresy URL budou vždy relativní k vygenerovanému souboru.
Generovat zdrojovou mapu
Vytvoří zdrojovou mapu. Zdrojová mapa je soubor, který přemosťuje mezeru mezi vysokoúrovňovými programovacími jazyky jako Sass a LESS a nizkoúrovňovým jazykem jako CSS.
Možnosti Sass/SCSS
Styl výstupního souboru
Určuje styl výstupního souboru CSS:
- Vnořený: upraví formátování kompilovaných souborů CSS do podoby známé modulární struktury.
- Kompaktní: upraví formátování kompilovaných souborů CSS do kompaktní struktury, která zabere méně místa než vnořená nebo rozšířená varianta.
- Komprimovaný: výstupní soubor CSS bude nestrukturovaný.
- 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 v rámci pravidel odsazené, pravidla však nejsou odsazena žádným způsobem.
Vytvořit komentáře ke zdroji
Vytvoří komentáře ve výstupním souboru CSS, který namapuje kód CSS k řádku, ze kterého byl vygenerován.
Generovat zdrojovou mapu
Vytvoří zdrojovou mapu (soubor, který přemosťuje mezeru mezi vysokoúrovňovými programovacími jazyky jako Sass a LESS a nizkoúrovňovým jazykem jako CSS).
Nastavit předvolby zdroje a výstupu CSS
Můžete určit, kde budou vygenerované Soubory CSS umístěny, a cestu, kterou má aplikace Dreamweaver sledovat a spustit automatickou kompilaci při změně souboru Sass/Less na této cestě pomocí externího editoru.
Poznámka:
Ve výchozím nastavení jsou možnosti v sekcích Zdroj a výstup platné pro Saas. Chcete-li tyto možnost pro rozhraní Compass povolit, musíte vybrat zaškrtávací políčko Použít Compass v sekci Compass.
Po úpravě těchto nastavení a instalaci rozhraní Compass budou všechna nastavení přenesena do souboru config.rb. Pokud budete později chtít změnit jakákoliv nastavení, upravte nastavení přímo v souboru config.rb. Změny provedené v dialogovém okně Nastavení webu neovlivní kompilaci.
Následující předvolby zdroje a výstupu preprocesorů CSS lze nastavit v dialogovém okně Weby > Správa webů.
Výstup CSS
Zadejte umístění vygenerovaného výstupního souboru CSS.
Do stejné složky jako zdroj
Tuto možnost vyberte, pokud chcete vygenerované soubory CSS uložit ve stejné složce jako zdrojové soubory Sass a LESS.
Určit výstupní složku
Vyberte tuto volbu a určete složku, kam chcete uložit vygenerované soubory CSS.
Nahradit část vstupní cesty
Tato volba umožňuje nahradit část cesty pomocí řetězců Z a Do. Pokud například nastavíte Z: scss a Do: css, výstupní soubor bude umístěn v cestě ve stejné stromové struktuře, ve které bude řetězec SCSS nahrazen řetězcem css.
Zdrojová složka
Zadejte podsložku v kořenové složce webu, který je třeba sledovat. Tato podsložka obvykle obsahuje všechny soubory SCSS a Less.
Pokud jste v nabídce Obecná nastavení povolili kompilaci, aplikace Dreamweaver automaticky spustí preprocesor CSS. Aplikace Dreamweaver spustí automatickou kompilaci v případě, je-li libovolný soubor ve složce upraven externě nebo z aplikace Dreamweaver.
Použití rozhraní Compass
Kompas je opensource rozhraní pro tvorbu CSS, které umožňuje vytvářet seznamy stylů CSS3 pomocí preprocesoru Sass.
Aplikace Dreamweaver nabízí podporu rozhraní Compass. Při vytváření stylů pomocí rozhraní Compass lze tyto styly zkompilovat a vygenerovat soubory CSS z aplikace Dreamweaver.
-
V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Compass. Vyberte možnost Použít Compass a klikněte na tlačítko Instalovat soubory.
Instalace souborů Compass Instalace souborů Compass Všechny soubory rozhraní Compass a konfigurační soubor *.rb jsou nainstalovány ve složce webu a lze je zobrazit v panelu Soubory.
Nainstalované soubory Compass
Nainstalované soubory Compass -
Určete existující konfigurační soubor využívající jazyk Ruby
Pokud již máte ve vašem počítači nainstalováno rozhraní Compass a nastavili jste soubor *.rb rozhraní Compass, z dialogového okna Nastavení webu aplikace Dreamweaver zadejte cestu k souboru *.rb rozhraní Compass v kořenu aktuálního webu.
- V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Compass.
- Zaškrtněte políčko Použít Compass.
- Klikněte na tlačítko Zadání konfiguračního souboru využívajícího jazyk Ruby a přejděte do umístění souboru.
- Na konci práce klikněte na tlačítko Uložit..
Určení existujícího konfiguračního souboru využívajícího jazyk Ruby Určení existujícího konfiguračního souboru využívajícího jazyk Ruby Poznámka:Tento soubor musí být umístěn v kořenové složce webu.
- V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Compass.
-
Určete možnost konfigurace ručně
Pokud nemáte existující možnost konfigurace, můžete konfigurace zadat ručně.
- V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Compass.
- Zaškrtněte políčko Použít Compass.
- Klikněte na položku Určit možnost konfigurace ručně. Určete některou z následujících možností a klikněte na tlačítko Uložit.
Následující pole se vyplní automaticky, můžete je ale změnit podle svých požadavků:
Poznámka:Všechny cesty vybrané v těchto volbách musí být v kořenové složce webu.
Cesta HTTP
Cesta k projektu při spuštění v rámci webového serveru. Výchozí hodnotou je "/".
Složka s obrázky
Složka, kde jsou uloženy obrázky. Adresář je vztažen k cestě project_path.
Složka vytvořených obrázků
Složka, kde jsou uloženy vytvořené obrázky. Tento adresář je vztažen k cestě project_path a standardně nastaven na hodnotu images_dir.
Složka s písmy
Složka, kde jsou uloženy soubory písem.
Relativní datové zdroje
Označuje, zda mají pomocné funkce rozhraní Compass vytvořit relativní adresy URL z vytvořeného CSS k datovým zdrojům nebo absolutní adresy URL s použitím cesty HTTP pro daný typ datového zdroje.
- V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Compass.
-
Pokud jste v dialogovém okně Weby > Správa webů > Preprocesory CSS vybrali možnost Povolit automatickou kompilaci při uložení souboru, aplikace Dreamweaver vygeneruje soubor CSS pokaždé, když uložíte změny do souboru Sass.
V okně prohlížeče můžete také zobrazit náhled těchto změn v reálném čase. Další informace o zobrazení náhledu prováděných změn v prohlížeči v reálném čase naleznete v tématu Náhled v reálném čase.
Nechcete-li využít možnosti automatické kompilace, můžete soubory CSS ručně kompilovat provedením jednoho z následujících úkonů:
- Na panelu Soubory klikněte pravým tlačítkem na soubor Sass, LESS nebo SCSS a poté na tlačítko Kompilovat.
- Aktuální soubor můžete také zkompilovat kliknutím na položky Nástroje > Kompilovat.
-
Poté můžete kompilovaný soubor CSS připojit k souborům HTML ve vašem webu. Další informace naleznete v tématu Odkaz na externí seznam stylů CSS.
Použití rozhraní Bourbon
Aplikace Dreamweaver podporuje řadu produktů Bourbon. Při vytváření stylů pomocí rozhraní Bourbon lze tyto styly zkompilovat a vygenerovat soubory CSS z aplikace Dreamweaver.
Podporovány jsou následující varianty rozhraní Bourbon:
- Bourbon – jednoduchá směšovací knihovna pro rozhraní Sass
- Bourbon Neat – jednoduché rozhraní sémantické sítě pro rozhraní Sass a Bourbon
- Bourbon Bitters – předlohy stylů, proměnné a struktury pro projekty Bourbon
Rozhraní Bourbon lze importovat přidáním jednoho z následujících příkazů do kódu:
- @import "bourbon" – importovat Bourbon
- @import "neat" – importovat Bourbon Neat
- @import "base" – importovat Bourbon Bitter
Aplikace Dreamweaver potom při kompilaci souborů preprocesoru použije připravenou 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. Rozhraní Bourbon je použito při spuštění kompilace pro libovolný soubor, který toto rozhraní importuje.
Instalace souborů Bourbon, Bourbon Neat nebo Bourbon Bitters
Chcete-li nainstalovat rozhraní Bourbon nebo jeho varianty:
-
V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Bourbon, Bourbon Neat nebo Bourbon Bitters.
-
Kliknutím na tlačítko Instalovat soubory nainstalujte soubory do zadané kořenové složky webu v rámci webu.
Instalace souborů Bourbon Instalace souborů Bourbon Všechny soubory Bourbon jsou nainstalovány ve složce webu a lze je zobrazit v panelu Soubory.
Nainstalované soubory Bourbon Nainstalované soubory Bourbon V případě neúspěchu se v panelu Výstup (Okno > Výsledky > Výstup) zobrazí chyby a ikona na stavovém řádku se změní na červenou.
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
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. Lze také určit umístění (v rámci kořene webu), kam má být vygenerovaný CSS uložen.
-
V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Obecné > Povolit automatickou kompilaci při uložení souboru.
Povolení automatické kompilace
Povolení automatické kompilace -
Klikněte na možnost Preprocesory CSS > Zdroj a výstup.
-
Určete umístění, kam chcete uložit vygenerované soubory CSS. Můžete zvolit jednu z následujících voleb:
Do stejné složky jako zdroj
Tuto možnost vyberte, pokud chcete vygenerované soubory CSS uložit ve stejné složce jako zdrojové soubory Sass a LESS.
Určit výstupní složku
Vyberte tuto volbu a určete složku, kam chcete vygenerované soubory CSS uložit.
Nahradit část vstupní cesty
Tato volba umožňuje nahradit část cesty pomocí řetězců Z a Do.
-
Zadejte složku obsahující soubory rozhraní Sass nebo LESS, které aplikace Dreamweaver sleduje.
Pokud provedete změny v libovolném souboru v této sledované složce, aplikace Dreamweaver soubory po uložení automaticky zkompiluje.
Nastavení zdroje a výstupu preprocesorů CSS Nastavení zdroje a výstupu preprocesorů CSS Poznámka:Aplikace Dreamweaver tyto soubory sleduje a kompiluje, i když provedete změny mimo aplikaci Dreamweaver (například pomocí textového editoru).
Po úspěšné kompilaci se na panelu Výstup (Okno > Výsledky > Výstup) zobrazí zpráva a ikona ve stavovém řádku se změní na zelenou. Kompilovaný CSS lze otevřít dvojím kliknutím na zprávu v panelu oznamující úspěch.
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 lze úspěšně kompilovat až po vyřešení všech chyb.
Poznámka:
Panel Výstup je ukotven ve spodní části pracovní plochy. Pokud panel zavřete, klepněte na možnost Okno > Panel výstupu.
Panel výstupu můžete také přepínat (zobrazit/skrýt) pomocí stavové ikony, pokud je její stav zobrazen červeně.
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. Automaticky se znovu načtou i webové stránky v Živém zobrazení.
Další informace o vytvoření odkazu z webové stránky na seznam stylů naleznete v tématu Odkaz na externí seznam stylů CSS.
Soubor preprocesoru CSS zkompilujte ručně
V některých případech (například pokud jste nedefinovali žádný web Dreamweaver) lze soubor preprocesoru CSS zkompilovat ručně.
V takovém případě zakažte volbu Povolit automatickou kompilaci při uložení souboru v nabídce Preprocesory CSS > panel Obecné v dialogovém okně Nastavení webu.
Pokud budete chtít preprocesor CSS ručně kompilovat, klikněte pravým tlačítkem na panel Soubor a klikněte na tlačítko Kompilovat.
Aktuální soubor můžete také zkompilovat kliknutím na položky Nástroje > Kompilovat.