Zjistěte, jak lze v aplikaci Dreamweaver pracovat se soubory preprocesoru CSS a jak je kompilovat.

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, zachovaným motivem a rozšiřitelností.

Aplikace Dreamweaver podporuje oblíbené preprocesory CSS: Sass a Less, stejně jako rozhraní Compass a Bourbon pro kompilaci souborů Sass.

Less využívá jazyk JavaScript a Sass využívá jazyk Ruby, ale nemusíte vědět nic ani o jednom z těchto jazyků ani použít příkazový řádek ke zkompilování souborů do formátu 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.

Jak aplikace Adobe Dreamweaver zachází s preprocesory CSS

Aplikace Dreamweaver zachází s preprocesory CSS podle toho, zda jste definovali web. Společnost Adobe doporučuje definovat web, protože web umožní libovolně nastavit předvolby preprocesoru CSS a také použít rozhraní Compass a Bourbon v aplikaci Dreamweaver. 

Pokud jste web definovali, 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.

Pokud definujete web, aplikace Dreamweaver také umožňuje použít rozhraní Sass – Compass, Bourbon, Bourbon Neat a Bourbon Bitters v aplikaci Dreamweaver.

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:

  1. Definujte web v aplikaci Dreamweaver a zajistěte, aby soubor Sass nebo 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.
  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 naleznete v tématu Nastavení předvoleb preprocesorů CSS určených pro konkrétní weby.
  3. 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.
  4. 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ů.

Nastavení předvoleb preprocesorů CSS určených pro konkrétní weby umožní spravovat preprocesory CSS podle webů a ovládat tak preprocesor CSS každého webu samostatně, aniž by bylo nutné při každém přepnutí webů aktualizovat předvolby.

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. 

Všeobecné předvolby preprocesorů CSS
Všeobecné předvolby preprocesorů CSS

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 společně při uložení souboru Sass, Less nebo SCSS vygenerujte 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

Za matematickým výrazem se v souboru CSS bude nacházet předpokládaná jednotka. Například výraz „5px * 2px“ se kompiluje jako 10px namísto 10px2. 

Když je tato volba vypnutá, Less se při zpracování vzorců pokusí odhadnout výstupní jednotku.

V tomto příkladu je CSS generován následujícím způsobem:

.class {
  property: 1px * 2px;
}

V tomto případě není odhad správný – délka vynásobená délkou určuje plochu, ale CSS nepodporuje zadání ploch. Zde se předpokládá, že uživatel považuje jednu z hodnot za hodnotu, nikoli za jednotku délky, a výstup z aplikace Dreamweaver bude 10px.

Pokud je režim Strict units povolen, tento generovaný CSS se považuje za chybu.

Přepsat adresy URL na relativní

Přepíše adresy URL v importovaných souborech tak, aby byla adresa URL vždy relativní k základnímu importovanému souboru. Pokud tedy soubor Less importuje jiný soubor Less, který následně odkazuje na obrázek, kompilovaný soubor CSS bude obsahovat relativní adresu URL.

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).

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.

Nastavení zdroje a výstupu preprocesorů CSS
Nastavení zdroje a výstupu preprocesorů CSS

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ý chcete sledovat. Tato podsložka obvykle obsahuje všechny soubory SCSS a Less. 

Pokud jste povolili kompilace v nastavení záložky Všeobecné, pak aplikace Dreamweaver automaticky spustí preprocesor CSS, když je změněn libovolný soubor v této složce 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. Proto při vytváření stylů pomocí rozhraní Compass lze tyto styly zkompilovat a vygenerovat soubory CSS z aplikace Dreamweaver.

  1. Instalovat soubory Compass.

    Pokud není rozhraní Compass již nainstalováno, lze je nainstalovat 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 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

  2. Určete existující konfigurační soubor využívající jazyk Ruby

    Pokud již máte v zařízení rozhraní Compass a nastavili jste soubor *.rb rozhraní Compass, v dialogovém okně Nastavení webu aplikace Dreamweaver zadejte cestu k souboru *.rb rozhraní Compass v kořenu aktuálního webu.

    1. V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Compass.
    2. Zaškrtněte políčko Použít Compass.
    3. 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.

  3. Určete možnost konfigurace ručně

    Pokud nemáte existující možnost konfigurace, můžete je zadat ručně.

    1. V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Compass.
    2. Zaškrtněte políčko Použít Compass.
    3. 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. Je relativní k cestě project_path.

    Složka vytvořených obrázků

    Složka, kde jsou uloženy vytvořené obrázky. Je relativní k cestě project_path. Výchozí nastavení odpovídá hodnotě 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.

  4. 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.

    Pokud nechcete 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.
  5. 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. Proto 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 jsou zkopírovány do vašeho webu a toto rozhraní je použito při spuštění kompilace pro libovolný soubor, který importuje toto rozhraní.

Instalace souborů Bourbon, Bourbon Neat nebo Bourbon Bitters

Chcete-li nainstalovat rozhraní Bourbon nebo jeho varianty:

  1. V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Bourbon, Bourbon Neat nebo Bourbon Bitters.

  2. 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.

  1. 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

  2. V dialogovém okně Nastavení webu vyberte možnost Preprocesory CSS > Zdroj a výstup.

  3. V dialogovém okně Zdroj a výstup zadejte umístění, kam chcete uložit generované 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 uložit vygenerované soubory CSS.

    Nahradit část vstupní cesty

    Tato volba umožňuje nahradit část cesty pomocí řetězců Z a Do.

  4. Zadejte složku obsahující soubory rozhraní Sass nebo Less, které má aplikace Dreamweaver "sledovat". 

    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 <icon>. Kompilovaný CSS lze otevřít dvojím kliknutím na zprávu v panelu oznamující úspěch.

Pokud se zobrazí chyby, kompilace CSS byla neúspěšná. Stavová ikona se změní na červenou <icon> 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ýstupu je obvykle ukotven ve spodní části pracovní plochy. Pokud panel zavřete, otevřete jej v nabídce Okno > Panel výstupu.

Panel výstupu můžete také přepínat (zobrazit/skrýt) pomocí stavové ikony, pokud je zobrazena č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 ručně kompilovat preprocesor CSS, klikněte pravým tlačítkem na panel Soubor a klikněte na tlačítko Kompilovat.

Ruční kompilace souborů preprocesoru CSS v panelu Soubory
Ruční kompilace souborů preprocesoru CSS v panelu Soubory

Aktuální soubor můžete také zkompilovat kliknutím na položky Nástroje > Kompilovat.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online