Użycie plików Compass
Jeśli struktura Compass nie jest jeszcze zainstalowana w systemie, można ją zainstalować za pomocą programu Dreamweaver.
Informacje o używaniu i kompilowaniu plików 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. Dzięki temu procedura tworzenia stylów CSS przebiega w sposób podobny do języków programowania,
co umożliwia stosowanie zmiennych, kombinacji, funkcji i wielu innych technik niedostępnych w zwykłym kodzie CSS.
Za pomocą preprocesorów CSS można zdefiniować potrzebne elementy jednokrotnie, a następnie używać ich wiele razy, uzyskując łatwy w utrzymaniu i rozbudowie kod CSS.
Ponadto użycie preprocesora pozwala tworzyć bardziej przejrzysty i łatwiejszy w utrzymaniu kod CSS. W przypadku serwisów, które odwołują się do wielu plików CSS, użycie preprocesora takiego jak Sass lub Compass redukuje nakłady pracy przy ręcznym tworzeniu kodu oraz kopiowaniu i wklejaniu.
Program Dreamweaver kompiluje pliki SCSS/LESS za pomocą wbudowanego kompilatora Ruby-Saas. Ponadto obsługiwane są 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. Program Dreamweaver automatycznie kompiluje te pliki do kodu CSS, stosując bibliotekę JavaScript o nazwie less.js podczas wczytywania, modyfikacji lub zapisywania pliku.
Obsługiwane wersje:
Sposób obsługi preprocesorów przez program Dreamweaver zależy od tego, czy został zdefiniowany serwis. Jeśli zdefiniujesz serwis, będzie można skonfigurować preferencje preprocesorów CSS oraz korzystać ze struktur Compass i Bourbon bezpośrednio w programie 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ć położenie plików Sass i CSS oraz skonfigurować opcje preprocesorów na potrzeby każdego serwisu.
Poniżej opisano sposób używania programu Dreamweaver w połączeniu z preprocesorami 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). Wprowadzone zmiany zostaną uwzględnione także we wszystkich otwartych plikach HTML, które wykorzystują kompilowany kod CSS.
Oto ogólny obieg pracy związany z korzystaniem z preprocesorów 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. Pozwoli to na dostęp do plików preprocesora w serwisie nawet wtedy, gdy w przyszłych wersjach ze struktury zostaną usunięte niektóre funkcje lub klasy domieszkowe.
W wersji Dreamweaver 2015 oraz wcześniejszych wersjach programu Dreamweaver CC można było używać plików Sass, LESS i SCSS. Konieczne jednak było kompilowanie tych plików poza programem Dreamweaver.
Procedura ta wyglądała następująco:
Czynności te trzeba wykonać po każdej modyfikacji pliku Sass/LESS/SCSS.
Ten samouczek wideo prezentuje sposoby rozbudowy stylów CSS za pomocą preprocesorów.
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.
Oto ogólny obieg pracy związany z korzystaniem z preprocesorów CSS:
Preferencje preprocesorów CSS dla danego serwisu ustawia się w oknie dialogowym Serwisy > Zarządzaj serwisami.
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. Zapewnia to także kontrolę nad preprocesorem CSS używanym w konkretnym serwisie bez konieczności zmiany ogólnych ustawień.
Ustawienia w sekcjach Ogólne oraz Źródło i wyjście dotyczą domyślnie struktury Ruby-Saas.
Aby ustawić preferencje struktury Compass, należy zaznaczyć pole wyboru Użyj struktury Compass w sekcji Compass.
W oknie dialogowym Serwisy > Zarządzaj serwisami > Preprocesory CSS można konfigurować następujące ustawienia ogólne preprocesorów CSS. Ustawienia te mają domyślnie zastosowanie do struktury Saas.
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 ręcznie skompilować pliki po każdym wprowadzeniu zmian.
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
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. Program Dreamweaver przyjmuje zatem, że użytkownik podał jedną z wartości jako liczbę, a nie jednostkę długości.
Jeśli opcja obsługi ścisłych jednostek jest włączona, program Dreamweaver uzna to za błąd w obliczeniach i zakomunikuje niepowodzenie.
Zmień adresy URL na względne
Dzięki tej opcji program przebudowuje adresy URL w generowanym pliku CSS w taki sposób, aby zawsze były względne w odniesieniu do tego pliku.
Generuj mapę źródła
Tworzy mapę źródła. Mapa źródła to 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.
Styl pliku wyjściowego
Określa styl wynikowego pliku CSS:
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).
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.
Opcje w sekcji Źródło i wyjście dotyczą domyślnie struktury Saas. Aby włączyć te opcje w odniesieniu do struktury Compass, należy zaznaczyć pole wyboru Użyj struktury Compass w sekcji Compass.
Po zmodyfikowaniu tych ustawień i zainstalowaniu struktury Compass wszystkie te ustawienia zostaną przeniesione do pliku config.rb. Ustawienia będzie można później modyfikować, edytując bezpośrednio plik config.rb. Ponadto zmiany wprowadzone w oknie dialogowym Ustawienia serwisu nie mają wpływu na kompilację.
W oknie dialogowym Serwisy > Zarządzaj serwisami można konfigurować następujące ustawienia źródła i wyjścia preprocesorów 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” na css spowoduje, że plik wyjściowy zostanie umieszczony w tej samej strukturze katalogu 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 włączono opcję Kompilacja, program Dreamweaver automatycznie uruchomi preprocesor CSS. Automatyczna kompilacja będzie wyzwalana w wyniku modyfikacji dowolnego pliku w folderze — czy to zewnętrznie, czy też w programie Dreamweaver.
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 tworzysz arkusze stylów w strukturze Compass, możesz je skompilować i wygenerować z nich pliki CSS w programie Dreamweaver.
Użycie 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.
Wszystkie pliki struktury Compass oraz plik konfiguracyjny *.rb są instalowane w folderze serwisu i można je wyświetlić na panelu Pliki.
Wybieranie istniejącego pliku konfiguracyjnego w języku Ruby
Jeśli na komputerze 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.
Musi to być plik znajdujący się w katalogu głównym serwisu.
Ręczne określanie opcji konfiguracji
Jeśli nie masz istniejącego pliku konfiguracyjnego, możesz określić opcje konfiguracyjne ręcznie.
Następujące pola są wypełniane automatycznie, ale można je zmodyfikować stosownie do potrzeb:
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 (project_path).
Katalog generowanych obrazów
Katalog, w którym są przechowywane wygenerowane obrazy. Określa się go względem ścieżki project_path, a jego domyślna wartość 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.
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 można znaleźć w sekcji 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:
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.
Program Dreamweaver obsługuje serię produktów Bourbon. Jeśli 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:
Strukturę Bourbon importuje się, dodając w kodzie jedną z następujących reguł:
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 zostaną skopiowane do serwisu. Będą one używane podczas kompilacji wyzwalanej dla dowolnego z plików, w których zaimportowano tę strukturę.
Aby zainstalować strukturę Bourbon lub dowolną z jej odmian:
W oknie dialogowym Konfiguracja serwisu wybierz opcję Preprocesory CSS > Bourbon, Bourbon Neat lub Bourbon Bitters.
Kliknij przycisk Zainstaluj pliki, aby zainstalować pliki w podanej lokalizacji wewnątrz katalogu głównego serwisu.
Wszystkie pliki Bourbon zostaną zainstalowane w folderze serwisu i będą widoczne na panelu Pliki.
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.
Pliki preprocesora CSS można kompilować jedną z następujących metod:
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.
W oknie dialogowym Konfiguracja serwisu wybierz pozycję Preprocesory CSS > Ogólne > Włącz automatyczną kompilację przy zapisie pliku.
Kliknij opcję Preprocesory CSS > Źródło i wyjście.
Określ lokalizacje, w których chcesz zapisywać 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”.
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.
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. Aby otworzyć skompilowany plik CSS, można kliknąć prawym przyciskiem myszy komunikat o powodzeniu operacji 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 zostanie pomyślnie skompilowany, dopóki nie usunie się wszystkich błędów.
Panel Wyjście jest zadokowany w dolnej części przestrzeni roboczej. Jeśli przypadkowo go zamkniesz, możesz go otworzyć za pomocą polecenia Okno > 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.
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.
Można również wybrać polecenie Narzędzia > Kompiluj, aby skompilować bieżący plik.