Informacje o używaniu i kompilowaniu plików preprocesorów CSS w programie Dreamweaver.

Preprocesory CSS kompilują kod napisany w języku preprocesorowym, przekształcając go w znany format CSS. Język preprocesora przenosi arkusze stylów CSS na poziom bliższy językom programowania,

umożliwiając stosowanie zmiennych, kombinacji, funkcji i wielu innych technik niedostępnych w zwykłym kodzie CSS.
Dzięki temu można zdefiniować potrzebne elementy jednokrotnie, a następnie używać ich wiele razy, uzyskując łatwy w utrzymaniu i rozbudowie kod CSS, dobrze dostosowany do obsługi motywów.

Program Dreamweaver obsługuje najpopularniejsze preprocesory CSS: Sass oraz Less, a także struktury Compass i Bourbon służące do kompilowania plików Sass.

Less powstał w języku JavaScript, natomiast Sass w języku Ruby. Nie trzeba jednak znać tych języków programowania ani korzystać z wiersza poleceń, aby kompilować pliki do postaci kodu CSS. Program Dreamweaver automatycznie kompiluje te pliki do kodu CSS, stosując bibliotekę JavaScript o nazwie less.js podczas wczytywania, modyfikacji lub zapisywania pliku.

Sposób obsługi preprocesorów CSS w programie Dreamweaver

Sposób obsługi preprocesorów przez program Dreamweaver zależy od tego, czy został zdefiniowany serwis. Firma Adobe zaleca zdefiniowanie serwisu, ponieważ umożliwia to skonfigurowanie preferencji preprocesorów CSS oraz korzystanie ze struktur Compass i Bourbon bezpośrednio w programie Dreamweaver. 

Jeśli został już zdefiniowany serwis, to można dostosować sposób działania preprocesorów CSS w programie Dreamweaver, ustawiając ich właściwości w kontekście tego serwisu.

Ustawienie preferencji preprocesorów CSS właściwych dla serwisu umożliwia określenie opcji kompilacji dla tego serwisu. Można również dostosować położenie plików Sass i CSS oraz skonfigurować opcje preprocesorów na potrzeby każdego serwisu.

Po zdefiniowaniu serwisu program Dreamweaver umożliwi także korzystanie ze struktur Sass: Compass, Bourbon, Bourbon Neat oraz Bourbon Bitters.

Jeśli serwis nie został zdefiniowany, to można ręcznie skompilować pliki Sass i Less. Jednak struktury Compass i Bourbon nie będą obsługiwane.

Jak korzystać z preprocesorów CSS w programie Adobe Dreamweaver

Oto ogólny obieg pracy związany z korzystaniem z preprocesorów CSS:

  1. Zdefiniuj serwis w programie Dreamweaver i sprawdź, czy pliki Sass lub Less, które chcesz skompilować, znajdują się w katalogu głównym tego serwisu. Jeśli masz już zdefiniowany serwis i plik Sass/Less umieszczony w katalogu głównym, przejdź do kolejnego kroku. Instrukcje konfigurowania serwisu programu Dreamweaver: Informacje o serwisach programu Dreamweaver.
  2. Ustaw preferencje preprocesorów CSS (takie jak położenie wygenerowanych plików CSS). Są to preferencje obowiązujące w kontekście określonego serwisu. Więcej informacji: Ustawianie preferencji preprocesorów CSS właściwych dla serwisu.
  3. Jeśli chcesz używać konkretnych struktur, takich jak Compass lub Bourbon, możesz określić ich ustawienia. Więcej informacji: Używanie struktury Compass oraz Używanie struktury Bourbon.
  4. Skonfiguruj kompilację automatyczną lub ręcznie skompiluj pliki Sass i Less. Więcej informacji: Kompilowanie plików preprocesora CSS.

Ustawianie preferencji preprocesorów CSS

Preferencje preprocesorów CSS dla danego serwisu ustawia się w oknie dialogowym Serwisy > Zarządzaj serwisami.

Definiowanie preferencji preprocesorów CSS na poziomie poszczególnych serwisów umożliwia zarządzanie preprocesorami w kontekście określonego serwisu. Można dzięki temu kontrolować zachowanie preprocesora CSS dla każdego z serwisów z osobna, bez konieczności zmiany preferencji za każdym razem, gdy przechodzi się do innego serwisu.

Konfigurowanie ogólnych ustawień preprocesorów CSS

W oknie dialogowym Serwisy > Zarządzaj serwisami > Preprocesory CSS można konfigurować następujące ustawienia ogólne preprocesorów CSS.

Ogólne ustawienia preprocesorów CSS
Ogólne ustawienia preprocesorów CSS

Włącz automatyczną kompilację przy zapisie pliku

Zaznacz to pole wyboru, aby włączyć automatyczną kompilację dla preprocesorów CSS. Jeśli ta opcja jest zaznaczona, program Dreamweaver automatycznie generuje plik CSS z chwilą zapisania przez użytkownika pliku Sass, Less lub SCSS. Jeśli ta opcja jest wyłączona, należy za każdym razem ręcznie skompilować pliki po wprowadzeniu zmian.

Opcje preprocesora Less

Włącz ścisłe zasady mat. (Strict Math)

Przetwarza tylko operacje matematyczne, które znajdują się w nawiasach. Na przykład zapis (100px/25px) zostanie przetworzony prawidłowo, natomiast zapis 20% + 10% (bez nawiasów) nie jest obsługiwany. Gdy ta opcja jest wyłączona, przetwarzane są wszystkie operacje matematyczne w pliku.

Włącz ścisłe jednostki

Dodaje w kodzie CSS prawdopodobną jednostkę za wynikiem operacji matematycznej. Na przykład zapis 5px * 2px zostanie skompilowany jako 10px, a nie 10px2. 

Gdy ta opcja jest wyłączona, Less podejmie próbę odgadnięcia jednostki wyjściowej podczas przetwarzania operacji matematycznych.

W naszym przykładzie kod CSS zostanie generowany w następujący sposób:

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

W tym przypadku próba odgadnięcia nie powiodła się — długość przemnożona przez długość daje pole powierzchni, ale kod CSS nie obsługuje wartości powierzchni. Przyjęte zostało założenie, że użytkownik podał jedną z wartości jako liczbę bez jednostki długości, dlatego program Dreamweaver wygeneruje wartość 2px.

Przy włączonej opcji ścisłych jednostek tak wygenerowany kod CSS zostanie uznany za błędny.

Zmień adresy URL na względne

Przebudowuje adresy URL w zaimportowanych plikach w taki sposób, aby były zawsze względne w stosunku do bazowego pliku importowanego. Oznacza to, że jeśli plik Less importuje kolejny plik Less, a ten z kolei odwołuje się do obrazu, w skompilowanym kodzie CSS zostanie umieszczony względny adres URL.

Generuj mapę źródła

Tworzy mapę źródła (plik, który pośredniczy między językami wysokiego poziomu, takimi jak Sass i Less, a językiem niskiego poziomu, do którego te preprocesory kompilują kod, np. CSS).

Opcje Sass/SCSS

Styl pliku wyjściowego

Określa styl wynikowego pliku CSS:

  • Zagnieżdżony: formatuje skompilowany kod CSS w znanej strukturze modułowej.
  • Zwarty: formatuje skompilowany plik CSS w taki sposób, że jego struktura zajmuje mniej miejsca niż w przypadku opcji Zagnieżdżony lub Rozwinięty.
  • Skompresowany: generuje kod CSS w postaci struktury płaskiej.
  • Rozwinięty: generuje plik CSS w takiej postaci, że każda właściwość i reguła znajduje się w osobnym wierszu. Właściwości w obrębie reguł są formatowane wcięciem, jednak reguły nie mają żadnego wcięcia.

Utwórz komentarze do źródła

Tworzy komentarze w wynikowym pliku CSS, która łączą kod CSS z wierszem, na podstawie którego ten kod został wygenerowany.

Generuj mapę źródła

Tworzy mapę źródła (plik, który pośredniczy między językami wysokiego poziomu, takimi jak Sass i Less, a językiem niskiego poziomu, do którego te preprocesory kompilują kod, np. CSS).

Ustawianie preferencji źródła i wyjścia CSS

Można zdefiniować zarówno ścieżkę, pod którą mają być zapisywane wygenerowane pliki CSS, jak i ścieżkę, którą program Dreamweaver powinien obserwować w celu wyzwalania automatycznej kompilacji, gdy zapisany tam plik Sass/LESS zostanie zmodyfikowany w edytorze zewnętrznym.

Ustawienia źródła i wyjścia dla preprocesorów CSS
Ustawienia źródła i wyjścia dla preprocesorów CSS

W oknie dialogowym Serwisy > Zarządzaj serwisami można konfigurować następujące ustawienia źródła i wyjścia preprocesorów CSS.

Wyjście CSS

Określa lokalizację generowanego pliku wyjściowego CSS.

W tym samym folderze, co źródło

Zaznacz tę opcję, jeśli chcesz, aby generowane pliki CSS były zapisywane w tym samym folderze, co źródłowe pliki Sass i Less.

Zdefiniuj folder wyjściowy

Zaznacz tę opcję, jeśli chcesz określić folder, w którym mają być zapisywane wygenerowane pliki CSS.

Zastąp segment ścieżki wejściowej

Ta opcja umożliwia zastąpienie fragmentu ścieżki z użyciem łańcuchów podawanych w polach „Z” i „Na”.

Na przykład ustawienie wartości „Z” na scss, a wartości „Na” css spowoduje, że plik wyjściowy zostanie umieszczony w tej samej strukturze drzewa po zastąpieniu frazy SCSS w ścieżce frazą CSS.

Folder źródłowy

Określ podfolder katalogu głównego serwisu, który ma być obserwowany. Zazwyczaj podfolder taki zawiera wszystkie pliki SCSS lub LESS. 

Jeśli w sekcji Ustawienia ogólne została włączona kompilacja, program Dreamweaver będzie automatycznie wyzwalać preprocesor CSS po każdej modyfikacji dowolnego z plików w tym folderze (obejmuje to zarówno modyfikacje wykonywane w edytorach zewnętrznych, jak i w programie Dreamweaver).

Korzystanie ze struktury Compass

Compass to struktura o otwartym dostępie do kodu źródłowego, umożliwiająca tworzenie arkuszy stylów CSS3 z użyciem preprocesora Sass.

Program Dreamweaver udostępnia obsługę struktury Compass. Jeśli więc tworzysz arkusze stylów w strukturze Compass, możesz je skompilować i wygenerować z nich pliki CSS w programie Dreamweaver.

  1. Instalowanie plików Compass.

    Jeśli struktura Compass nie jest jeszcze zainstalowana w systemie, można ją zainstalować za pomocą programu Dreamweaver. 

    W oknie dialogowym Konfiguracja serwisu wybierz opcje Preprocesory CSS > Compass. Zaznacz opcję Użyj struktury Compass i kliknij pozycję Zainstaluj pliki.

    Instalowanie plików Compass
    Instalowanie plików Compass

    Wszystkie pliki struktury Compass oraz plik konfiguracyjny *.rb są instalowane w folderze serwisu i można je wyświetlić na panelu Pliki.

    Zainstalowane pliki Compass
    Zainstalowane pliki Compass

  2. Wybieranie istniejącego pliku konfiguracyjnego w języku Ruby

    Jeśli na komputerach jest już zainstalowana struktura Compass i istnieje jej plik konfiguracyjny *.rb, to należy podać ścieżkę do tego pliku w oknie dialogowym Konfiguracja serwisu w programie Dreamweaver. Plik konfiguracyjny struktury Compass musi być zlokalizowany wewnątrz katalogu głównego bieżącego serwisu.

    1. W oknie dialogowym Konfiguracja serwisu wybierz opcje Preprocesory CSS > Compass.
    2. Zaznacz pole wyboru Użyj struktury Compass.
    3. Kliknij opcję Podaj plik konfiguracyjny Ruby i przejdź do lokalizacji tego pliku. Po zakończeniu kliknij przycisk Zapisz.
    Wybieranie istniejącego pliku konfiguracyjnego w języku Ruby
    Wybieranie istniejącego pliku konfiguracyjnego w języku Ruby

    Uwaga:

    Musi to być plik znajdujący się w katalogu głównym serwisu.

  3. Ręczne określanie opcji konfiguracji

    Jeśli nie masz istniejącego pliku konfiguracyjnego, możesz określić opcje konfiguracyjne ręcznie.

    1. W oknie dialogowym Konfiguracja serwisu wybierz opcje Preprocesory CSS > Compass.
    2. Zaznacz pole wyboru Użyj struktury Compass.
    3. Kliknij opcję Ręczne określanie opcji konfiguracji. Określ dowolne spośród następujących opcji konfiguracyjnych i kliknij przycisk Zapisz.

    Następujące pola są wypełniane automatycznie, ale można je zmodyfikować stosownie do potrzeb:

    Uwaga:

    Wszystkie ścieżki wybrane w tych opcjach muszą się znajdować w katalogu głównym serwisu.

    Ścieżka HTTP

    Ścieżka do projektu uruchamianego na serwerze WWW. Wartość domyślna to „/”.

    Katalog obrazów

    Katalog, w którym są przechowywane obrazy. Określa się go względem ścieżki projektu.

    Katalog generowanych obrazów

    Katalog, w którym są przechowywane wygenerowane obrazy. Określa się go względem ścieżki projektu. Wartość domyślna to images_dir.

    Katalog czcionek

    Katalog, w którym są przechowywane pliki czcionek.

    Zasoby względne

    Określa, czy funkcje pomocnicze Compass mają generować względne adresy URL, prowadzące z wygenerowanego kodu CSS do zasobów, czy też bezwzględne adresy URL z użyciem ścieżki HTTP danego typu zasobu.

  4. Jeśli w oknie dialogowym Serwisy > Zarządzaj serwisami > Preprocesory CSS została zaznaczona opcja Włącz automatyczną kompilację przy zapisie pliku, to program Dreamweaver będzie generować plik CSS za każdym razem, gdy użytkownik zapisze zmiany w plikach Sass. Można także wyświetlić podgląd tych zmian w czasie rzeczywistym w oknie przeglądarki. Więcej informacji o podglądzie zmian w przeglądarce: Podgląd w czasie rzeczywistym.

    Jeśli nie chcesz korzystać z automatycznej kompilacji, możesz ręcznie skompilować plik CSS, wykonując jedną z następujących czynności:

    • Kliknij prawym przyciskiem myszy plik Sass, Less lub SCSS w panelu Pliki, a następnie wybierz opcję Kompiluj. 
    • Wybierz polecenie Narzędzia > Kompiluj, aby skompilować bieżący plik.
  5. Skompilowany plik CSS można następnie dołączyć do plików HTML w serwisie. Więcej informacji: Łączenie z zewnętrznym arkuszem stylów CSS.

Korzystanie ze struktury Bourbon

Program Dreamweaver obsługuje serię produktów Bourbon. Jeśli więc tworzysz arkusze stylów w strukturze Bourbon, możesz je skompilować i wygenerować z nich pliki CSS w programie Dreamweaver.

Obsługiwane są następujące odmiany produktów Bourbon:

  • Bourbon — prosta, lekka biblioteka mieszania na potrzeby struktury Sass.
  • Bourbon Neat — lekka, semantyczna struktura siatki na potrzeby Sass i Bourbon.
  • Bourbon Bitters — style, zmienne i struktury konstrukcyjne do tworzenia projektów Bourbon.

Strukturę Bourbon importuje się, dodając w kodzie jedną z następujących reguł:

  • @import "bourbon" — aby zaimportować Bourbon;
  • @import "neat" — aby zaimportować Bourbon Neat;
  • @import "base" — aby zaimportować Bourbon Bitters.

Program Dreamweaver będzie wówczas używać pakietowej wersji struktury Bourbon, kompilując pliki preprocesora.

Można również zainstalować pliki struktury Bourbon w serwisie, tak aby kolejne aktualizacje programu Dreamweaver nie wpływały na obieg pracy kompilacji. Pliki struktury Bourbon są kopiowane do serwisu i będą używane podczas kompilacji wyzwalanej dla dowolnego z plików, w których zaimportowano tę strukturę.

Instalowanie plików Bourbon, Bourbon Neat lub Bourbon Bitters

Aby zainstalować strukturę Bourbon lub dowolną z jej odmian:

  1. W oknie dialogowym Konfiguracja serwisu wybierz opcję Preprocesory CSS > Bourbon, Bourbon Neat lub Bourbon Bitters.

  2. Kliknij przycisk Zainstaluj pliki, aby zainstalować pliki w podanej lokalizacji wewnątrz katalogu głównego serwisu.

    Instalowanie plików Bourbon
    Instalowanie plików Bourbon

    Wszystkie pliki Bourbon zostaną zainstalowane folderze serwisu i będą widoczne na panelu Pliki.

    Zainstalowane pliki Bourbon
    Zainstalowane pliki Bourbon

    W przypadku błędu na panelu Wyjście (Okno > Wyniki > Wyjście) zostaną wyświetlone informacje o tych błędach, a ikona na pasku stanu zmieni kolor na czerwony.

Kompilowanie plików preprocesora CSS

Pliki preprocesora CSS można kompilować jedną z następujących metod:

Konfigurowanie automatycznej kompilacji plików preprocesora CSS

W programie Dreamweaver można skonfigurować ustawienia automatycznej kompilacji zmian wprowadzonych w pliku Sass lub Less do postaci kodu CSS. Można także określić położenie (wewnątrz katalogu głównego serwisu), w którym mają być zapisywane tak wygenerowane pliki CSS.

  1. W oknie dialogowym Konfiguracja serwisu wybierz pozycję Preprocesory CSS > Ogólne > Włącz automatyczną kompilację przy zapisie pliku.

    Włączanie automatycznej kompilacji
    Włączanie automatycznej kompilacji

  2. W oknie dialogowym Konfiguracja serwisu wybierz opcje Preprocesory CSS > Źródło i wyjście.

  3. W oknie dialogowym Źródło i wyjście określ lokalizacje, w których mają być zapisywane wygenerowane pliki CSS. Można wybrać jedną z następujących opcji:

    W tym samym folderze, co źródło

    Zaznacz tę opcję, jeśli chcesz, aby generowane pliki CSS były zapisywane w tym samym folderze, co źródłowe pliki Sass i Less.

    Zdefiniuj folder wyjściowy

    Zaznacz tę opcję, jeśli chcesz określić folder, w którym mają być zapisywane wygenerowane pliki CSS.

    Zastąp segment ścieżki wejściowej

    Ta opcja umożliwia zastąpienie fragmentu ścieżki z użyciem łańcuchów podawanych w polach „Z” i „Na”.

  4. Określ folder z plikami Sass lub Less, który ma być obserwowany przez program Dreamweaver. 

    Jeśli wprowadzisz jakiekolwiek zmiany w plikach w tym obserwowanym folderze, program Dreamweaver automatycznie skompiluje te pliki, gdy zostaną zapisane.

    Ustawienia źródła i wyjścia dla preprocesorów CSS
    Ustawienia źródła i wyjścia dla preprocesorów CSS

    Uwaga:

    Program Dreamweaver obserwuje i kompiluje te pliki także wtedy, gdy zmiany zostały wprowadzone w innym programie (na przykład w edytorze tekstu).

Po pomyślnym zakończeniu kompilacji w panelu Wyjście (Okno > Wyniki > Wyjście) zostanie wyświetlony odpowiedni komunikat, a ikona na pasku stanu będzie mieć kolor zielony <ikona>. Aby otworzyć skompilowany plik CSS, można kliknąć prawym przyciskiem myszy komunikat o powodzeniu operacji w panelu.

Jeśli wystąpiły błędy, kompilacja kodu CSS nie zostanie zakończona pomyślnie. W takiej sytuacji ikona stanu będzie mieć kolor czerwony <ikona>, a w panelu Wyjście zostanie wyświetlona lista błędów i ostrzeżeń. Klikając dwukrotnie komunikat o błędzie w tym panelu można szybko przejść do odpowiedniego wiersza w kodzie. Plik CSS nie zostanie pomyślnie skompilowany, dopóki nie usunie się wszystkich błędów.

Uwaga:

Panel Wyjście jest na ogół zadokowany w dolnej części przestrzeni roboczej. Jeśli przypadkowo go zamkniesz, możesz go otworzyć za pomocą polecenia Okno > Panel Wyjście.

Panel Wyjście można również przełączać (otwierać lub zamykać) za pomocą ikony stanu, gdy jest czerwona.

Po uzyskaniu skompilowanego pliku CSS można połączyć stronę WWW z tym arkuszem stylów. Jeśli wprowadzi się zmiany w preprocesorach CSS, odpowiadające im skompilowane pliki CSS zostaną automatycznie uaktualnione. Strona WWW również zostanie automatycznie odświeżona w widoku aktywnym.

Więcej informacji: Łączenie z zewnętrznym arkuszem stylów CSS.

Ręczne kompilowanie plików preprocesora CSS

W niektórych sytuacjach (np. jeśli nie zdefiniowano jeszcze serwisu programu Dreamweaver) można skorzystać z opcji ręcznego kompilowania plików preprocesora CSS.

W takim przypadku należy wyłączyć opcję „Włącz automatyczną kompilację przy zapisie pliku” w panelu Preprocesory CSS > Ogólne okna dialogowego Konfiguracja serwisu.

Aby ręcznie skompilować kod preprocesora CSS, kliknij odpowiedni plik w panelu Pliki prawym przyciskiem myszy i wybierz polecenie Kompiluj.

Ręczne kompilowanie plików preprocesora CSS za pomocą panelu Pliki
Ręczne kompilowanie plików preprocesora CSS za pomocą panelu Pliki

Można również wybrać polecenie Narzędzia > Kompiluj, aby skompilować bieżący plik.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online