Korzystanie z preprocesorów CSS w programie Dreamweaver

CSS to język, który służy do opisu stylu dokumentu HTML. Preprocesory CSS kompilują kod napisany w języku preprocesorowym, przekształcając go w typowy kod CSS. Przetworzony język podnosi poziom CSS do poziomu bliższego językowi programowania.

W szczególności preprocesory umożliwiają korzystanie ze zmiennych, mixinów, funkcji i wielu innych technik, które
nie są możliwe w CSS.Korzystając z preprocesorów CSS, można zdefiniować wszystko raz i wielokrotnie używać ponownie, co skutkuje łatwym do utrzymania i rozszerzalnym kodem CSS.

Ponadto użycie preprocesora pozwala tworzyć bardziej przejrzysty i łatwiejszy w utrzymaniu kod CSS. Jeśli tworzysz witryny odwołujące się do wielu plików CSS, korzystanie z preprocesorów CSS, takich jak Sass lub Compass, może zmniejszyć ręczne kodowanie i operacje kopiowania/wklejania.

Program Dreamweaver kompiluje pliki SCSS/LESS za pomocą wbudowanego kompilatora Ruby-Saas. Dreamweaver obsługuje również struktury Compass i Bourbon do kompilowania plików Sass. 

LESS to język oparty na języku JavaScript, natomiast Sass jest oparty na języku Ruby. Jakakolwiek znajomość tych języków programowania nie jest jednak konieczna. Nie trzeba także używać wiersza poleceń w celu kompilacji plików do postaci kodu CSS. Dreamweaver automatycznie kompiluje te pliki do CSS za pomocą biblioteki JavaScript less.js podczas ładowania, edycji lub zapisywania tych plików.

Obsługiwane wersje:

• 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

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. Po zdefiniowaniu witryny można skonfigurować preferencje preprocesora CSS i używać struktur Compass i Bourbon z poziomu programu Dreamweaver.

Definiując serwis, możesz 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ć lokalizację plików Sass i CSS oraz opcje preprocesora specyficzne dla każdej witryny.

Przeczytaj dalej, aby dowiedzieć się, jak używać programu Dreamweaver z preprocesorami CSS:

Dreamweaver 2017 a preprocesory CSS

Wersja Dreamweaver 2017 oferuje wbudowaną obsługę preprocesorów CSS. Oznacza to możliwość pracy z plikami Sass/LESS/SCSS bezpośrednio w programie Dreamweaver. Wystarczy nacisnąć klawisze Ctrl+S lub Cmd+S, aby automatycznie skompilować kod CSS. Można również przeprowadzić ręczną kompilację poszczególnych plików, wybierając polecenie Narzędzia > Kompiluj (lub naciskając klawisz F9). Zmiany są również odzwierciedlone we wszystkich otwartych plikach HTML, w których ten skompilowany kod CSS jest połączony lub dołączony.

Oto ogólny obieg pracy zadań wykonywanych podczas korzystania z preprocesorów CSS:

• Zainstaluj odpowiedni kompilator, jeśli chcesz używać preprocesora Compass lub Bourbon w programie Dreamweaver. Instaluje się go jednym kliknięciem. Skonfiguruj ustawienia preprocesora CSS.

Kompilator należy zainstalować tylko w sytuacji, gdy chcesz skopiować pliki struktury (Bourbon) lub wygenerować domyślne pliki scss i pliki konfiguracyjne Ruby (Compass). Zaleca się zachowanie kopii plików struktury. Jeśli określone miksiny lub funkcje ze struktury autorskiej zostaną usunięte w późniejszych wersjach, nadal można uzyskać dostęp do plików preprocesora w witrynie.

• Sprawdź, czy funkcja automatycznej kompilacji jest włączona. Następnie naciśnij pozycję Zapisz, aby zaktualizować pliki CSS.
• (Opcjonalnie) Wyświetl zmiany odzwierciedlane w widoku na żywo lub podglądzie w czasie rzeczywistym na wszystkich stronach HTML, na których używany jest wygenerowany kod CSS.

Dreamweaver 2015 a preprocesory CSS

W wersji Dreamweaver 2015 oraz wcześniejszych wersjach programu Dreamweaver CC można było używać plików Sass, LESS i SCSS. Jednak te pliki musiały być kompilowane samodzielnie poza aplikacją Dreamweaver.
Obieg pracy przypominałby następujące kroki:

1. Pobierz i zainstaluj kompilator.
2. Skonfiguruj zadanie grunt (Gruntfile.js) dla kompilatora, aby odczytywał plik Sass/LESS/SCSS.
3. Skonfiguruj inne zadanie grunt do kompilacji pliku do CSS, który następnie możesz wprowadzić do Dreamweaver.

Te kroki należy wykonywać za każdym razem, gdy wprowadzasz zmiany w pliku Sass/LESS/SCSS.

Jeśli serwis nie został zdefiniowany, 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 zadań związanych z używaniem preprocesorów CSS:

1. Definiowanie serwisu w programie Dreamweaver. Sprawdź, czy pliki Sass lub LESS, które chcesz skompilować, znajdują się w katalogu głównym serwisu. Jeśli masz już zdefiniowany serwis, a plik Sass/LESS umieszczony jest w katalogu głównym, przejdź do kolejnego kroku. Aby uzyskać więcej informacji na temat konfigurowania witryny Dreamweaver, zobacz Informacje o witrynach 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 podano w artykule Ustawianie preferencji preprocesora CSS specyficznych dla witryny.
3. Jeśli chcesz używać konkretnych struktur, takich jak Compass lub Bourbon, możesz określić ich ustawienia. Więcej informacji podano w następujących miejscach: Używanie frameworku Compass lub Używanie frameworku Bourbon.
4. Skonfiguruj kompilację automatyczną lub ręcznie skompiluj pliki Sass i LESS. Więcej informacji można znaleźć w artykule Kompilowanie pliki preprocesora CSS.

Ustawianie preferencji preprocesorów CSS

Można ustawić preferencje dotyczące preprocesorów CSS dla konkretnej witryny za pomocą okna dialogowego Sites > Zarządzaj witrynami.

Ustawianie preferencji preprocesorów CSS właściwych dla serwisu umożliwia zarządzanie tymi preprocesorami w różny sposób w różnych serwisach. Ta akcja daje również kontrolę nad preprocesorem CSS dla każdej witryny, bez konieczności aktualizowania preferencji za każdym razem podczas przełączania witryn.

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. Domyślnie te Ustawienia są stosowane dla frameworka Saas.

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 pozostanie odznaczona, trzeba będzie ręcznie kompilować pliki za każdym razem, gdy wprowadzi się zmiany.

Opcje LESS

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, wszystkie obliczenia matematyczne w pliku są przetwarzane.

Bez tej opcji preprocesor LESS podejmuje próbę odgadnięcia jednostki wyjściowej przy wykonywaniu działań matematycznych. Na przykład:

.class {

property: 1px * 2px;

}

W tym przypadku długość przemnożona przez długość daje pole powierzchni, ale kod CSS nie obsługuje takiej jednostki miary. Dreamweaver zakłada, że użytkownik chciał, aby jedna z wartości była wartością, a nie jednostką długości.

Gdy ścisłe jednostki są włączone, Dreamweaver zakłada, że jest to błąd obliczenia i zgłasza błąd.

Ta opcja umożliwia przepisanie adresów URL w generowanym pliku CSS tak, aby adresy URL były zawsze względne w stosunku do wygenerowanego pliku. 

Tworzy mapę źródła. Mapa źródła to plik, który wypełnia lukę między językami wysokiego poziomu, takimi jak Sass i LESS, a językiem niskiego poziomu, do którego są kompilowane, takim jak CSS.

Opcje Sass/SCSS

Określa styl pliku wyjściowego CSS:

• Zagnieżdżony — formatuje skompilowany CSS w dobrze znanej, modularnej strukturze.
• Kompaktowy — formatuje skompilowany CSS w kompaktowej strukturze zajmującej mniej miejsca niż Zagnieżdżony lub Rozwinięty.
• Skompresowany — generuje CSS w płaskiej strukturze.
• 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 są wcięte w obrębie reguł, ale same reguły nie są w żaden sposób wcięte. 

Tworzy komentarze w wyjściowym pliku CSS, które mapują kod CSS na wiersz, z którego został wygenerowany.

Tworzy mapę źródłową (plik łączący języki wysokiego poziomu, takie jak Sass i LESS, z językami niskiego poziomu, do których są kompilowane, takimi jak CSS). 

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

Można zdefiniować, gdzie powinny zostać umieszczone wygenerowane pliki CSS oraz ścieżkę, którą program Dreamweaver powinien obserwować i wyzwalać automatyczną kompilację, gdy plik Sass/LESS w ścieżce zostanie zmodyfikowany za pomocą zewnętrznego edytora.

Można ustawić następujące ustawienia źródła i wyjścia preprocesora CSS w oknie dialogowym Witryny > Zarządzaj witrynami.

Wyjście CSS

Określ lokalizację wyjściowego pliku CSS, który zostanie wygenerowany.

Wybierz tę opcję, jeśli chcesz, aby wygenerowane pliki CSS zostały zapisane w tym samym folderze co źródłowe pliki Sass i LESS.

Wybierz tę opcję i określ folder, w którym chcesz zapisać wygenerowane pliki CSS.

Ta opcja umożliwia zastąpienie fragmentu ścieżki z użyciem łańcuchów podawanych w polach „Z” i „Na”. Na przykład po ustawieniu Z: scss i Do: css plik wyjściowy jest umieszczany w tej samej strukturze drzewa po zastąpieniu SCSS w ścieżce css.

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

Jeśli w sekcji Ustawienia ogólne włączono opcję Kompilacja, program Dreamweaver automatycznie uruchomi preprocesor CSS. Program Dreamweaver wyzwala automatyczną kompilację, gdy dowolny plik w folderze zostanie zmodyfikowany zewnętrznie lub z poziomu programu Dreamweaver.

Korzystanie ze struktury Compass

Compass to platforma autorstwa CSS typu open source, która umożliwia tworzenie arkuszy stylów CSS3 przy użyciu Sass.

Program Dreamweaver udostępnia obsługę struktury Compass. Jeśli tworzysz arkusze stylów przy użyciu Compass, można je kompilować i generować pliki CSS z poziomu programu Dreamweaver.

Korzystanie ze struktury Bourbon

Program Dreamweaver obsługuje serię produktów Bourbon. Jeśli tworzysz arkusze stylów za pomocą Bourbon, można kompilować te arkusze stylów i generować pliki CSS z poziomu programu Dreamweaver.

Obsługiwane są następujące warianty Bourbon:

• Bourbon — prosta i lekka biblioteka miksowania dla Sass
• Bourbon Neat — lekka semantyczna struktura siatki dla Sass i Bourbon
• Bourbon Bitters — style szkieletowe, zmienne i struktura dla projektów Bourbon

Można zaimportować framework Bourbon, dodając jeden z poniższych elementów w kodzie:

• @import "bourbon" — aby zaimportować Bourbon
• @import "neat" — aby zaimportować Bourbon Neat
• @import "base" — aby zaimportować Bourbon Bitter

Program Dreamweaver używa następnie wstępnie spakowanej wersji Bourbon podczas kompilacji plików 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 zostaną skopiowane do serwisu. Bourbon jest frameworkiem używanym podczas wyzwalania kompilacji dla wszystkich plików importujących ten framework.

Instalowanie plików Bourbon, Bourbon Neat lub Bourbon Bitters

Aby zainstalować Bourbon lub dowolny z jego wariantów:

Kompilowanie plików preprocesora CSS

Można skompilować pliki preprocesora CSS na jeden z następujących sposobów:

• Konfigurowanie automatycznej kompilacji plików preprocesora CSS
• Ręczne kompilowanie pliku preprocesora CSS

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 również określić lokalizacje (w obrębie katalogu głównego witryny), w których ma zostać zapisany wygenerowany kod CSS.

Po pomyślnej kompilacji komunikat jest wyświetlany w panelu Dane wyjściowe (Okno > Wyniki > Dane wyjściowe). Ikona stanu na pasku stanu jest wyświetlana na zielono. Aby otworzyć skompilowany kod CSS, kliknij dwukrotnie komunikat o powodzeniu w panelu.

Pojawienie się błędów lub ostrzeżeń sugeruje, że kompilacja kodu CSS nie została zakończona pomyślnie. W takiej sytuacji ikona stanu będzie mieć kolor czerwony, 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 jest kompilowany pomyślnie, dopóki nie zostaną rozwiązane wszystkie błędy.

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 internetowa również jest automatycznie odświeżana w widoku na żywo.

Więcej informacji o łączeniu strony internetowej z arkuszem stylów podano w Łączenie z zewnętrznym arkuszem stylów CSS.

Ręczne kompilowanie plików preprocesora CSS

W niektórych sytuacjach (na przykład jeśli nie zdefiniowano witryny Dreamweaver) można ręcznie skompilować plik preprocesora CSS.

W takich scenariuszach wyłącz opcję Włącz automatyczną kompilację przy zapisywaniu pliku w panelu Preprocesory CSS > Ogólne okna dialogowego Konfiguracja witryny.

Aby ręcznie skompilować preprocesor CSS, kliknij prawym przyciskiem myszy plik w panelu Pliki i kliknij Kompiluj.

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