Sass i Compass. Praktyczny przewodnik dla projektantów - ebook

Projektuj pięknie i wygodnie — Sass i Compass do Twoich usług!

• Instalowanie Sass i Compass oraz konfigurowanie projektów, czyli od czego zacząć naukę
• Kolory, siatki i responsywność, czyli jak zapewnić stronie dobry wygląd na każdym urządzeniu
• Automatyzacja pisania kodu CSS, czyli jak działać szybko i eliminować zbędne czynności

Kaskadowe arkusze stylów są dziś wykorzystywane przez wszystkich projektantów stron internetowych na całym świecie. Jest to bardzo wygodne i elastyczne narzędzie, jednak prawdziwie spektakularne efekty można osiągnąć dzięki zastosowaniu CSS w połączeniu z preprocesorem Sass oraz technologią Compass. Możliwe, że nie bardzo wiesz, co znaczą te nazwy, i nie masz pojęcia, do czego mogłyby Ci się przydać te dodatki. Jeśli jednak jesteś projektantem, powinieneś czym prędzej zapoznać się z tymi narzędziami, ponieważ niebywale ułatwią Ci pracę. I nie musisz być geniuszem ani informatykiem, żeby skorzystać z ich mocy. Wystarczy, że znasz HTML i CSS.

Ta książka nie została napisana z myślą o programistach. Jej celem jest pokazanie spektrum działania technologii Sass i Compass wszystkim tym, którzy często używają CSS. Znajdziesz tu informacje na temat instalowania i konfigurowania obu dodatków, sprawnego posługiwania się kolorami i tworzenia responsywnych układów stron. Po tych podstawach przyjdzie czas na naukę pisania zapytań medialnych i eksperymentalnych deklaracji CSS dla różnych przeglądarek, a także ćwiczenia ze sporządzania statystyk. Następnie dowiesz się, jak utworzyć idealnego duszka w rekordowo krótkim czasie i zautomatyzować swoją pracę za pomocą inteligentnych pętli. Przeczytaj i zastosuj, a szybko zakochasz się w dodatkach Sass i Compass!

• Sass i Compass dla początkujących
• Tworzenie projektu Sass i Compass
• Zagnieżdżanie, rozszerzanie, symbole zastępcze i domieszki
• Praca z kolorami
• Responsywne i elastyczne siatki
• Tworzenie zapytań medialnych za pomocą Sass i domieszek
• CSS3, duszki i inne cuda
• Logika programistyczna w Sass
• Sass i Compass dla zaawansowanych

Sass i Compass skrócą Ci drogę do pięknych stron!

Zespół wydania oryginalnego (9)

Przedmowa (11)

O autorze (13)

O korektorach merytorycznych (15)

Wprowadzenie (17)

Rozdział 1. Sass i Compass dla początkujących (21)

• Do czego służą preprocesory CSS (22)
  • Skoro ostatecznym wynikiem jest kod CSS, to lepiej od razu pisać kod CSS (23)
• Dlaczego należy używać właśnie Sass i Compass (23)
  • Zmienne (aby wartości definiować tylko raz) (23)
  • Automatyczne kolory w formacie RGBA i konwersje (24)
  • Zapomnij o przedrostkach producentów (25)
  • Zagnieżdżanie reguł (26)
  • Prostsze zapytania medialne (27)
  • Automatyczna kompresja kodu CSS i przyspieszenie działania strony (28)
• Czym jest Sass (29)
• Czym jest Compass (29)
• Instalacja Sass i Compass (30)
  • Instalacja pakietu dla systemu OS X (30)
• Instalacja Sass i Compass i praca z nimi w wierszu poleceń (31)
  • Instalacja interpretera Ruby w systemie Windows (31)
  • Polecenie gem (32)
  • Instalacja z wiersza poleceń w systemie Mac OS X (32)
  • Instalacja z wiersza poleceń w systemie Windows (33)
  • Sprawdzanie wersji Compass i Sass (35)
  • Sprawdzanie, które wersje Sass i Compass są dostępne (35)
  • Instalowanie najnowszej wersji Sass i Compass (włącznie z wydaniami wstępnymi) (36)
  • Tworzenie projektu Sass i Compass z poziomu wiersza poleceń (37)
  • Automatyczne kompilowanie kodu na CSS z poziomu wiersza poleceń (38)
• Graficzne narzędzia do pracy z Sass i Compass (38)
  • Scout (38)
  • CodeKit (39)
  • LiveReload (40)
• Praca z plikami Sass w edytorach tekstu (41)
• Podsumowanie (42)

Rozdział 2. Tworzenie projektu Sass i Compass (43)

• Tworzenie projektu Sass i Compass (44)
  • Tworzenie projektów Compass (45)
• Struktura pliku config.rb (48)
  • Dodawanie niezbędnych wtyczek (49)
  • Ustawianie nazw i ścieżek do zasobów (50)
  • Ustawianie stylu wyjściowego CSS (50)
• Tworzenie i używanie plików częściowych (54)
  • Sass zapewnia kod gotowy do produkcji i łatwy w obsłudze (55)
  • Importowanie pliku częściowego (56)
  • Składnia definicji zmiennych w Sass (57)
• Rodzaje komentarzy w języku Sass (58)
  • Standardowe komentarze CSS (58)
  • Jednowierszowe komentarze Sass (58)
• Podstawowy plik index.html (59)
• Podstawa dla przyszłych projektów (60)
• Podsumowanie (60)

Rozdział 3. Zagnieżdżanie, rozszerzanie, symbole zastępcze i domieszki (63)

• Stylizowanie strony za pomocą technologii Sass i Compass (64)
• Oddzielanie układu od elementów wizualnych (65)
• Co to jest zagnieżdżanie kodu i jak umożliwia ono tworzenie modułów (68)
  • Składanie zagnieżdżania (68)
  • Dodawanie stylów Modernizr za pomocą selektora rodzica (73)
  • Zagnieżdżanie przestrzeni nazw (79)
• Rozszerzanie istniejących reguł za pomocą dyrektywy @extend (82)
• Rozszerzanie stylów, gdy jest taka konieczność, za pomocą selektorów zastępczych (84)
• Co to są domieszki i jak za ich pomocą definiować często używane fragmenty kodu (85)
  • Podstawowa składnia domieszek (87)
  • Jak pisać domieszki z ustawieniami domyślnymi (88)
• Ostrzeżenie co do generowanego kodu CSS (91)
• Podsumowanie (91)

Rozdział 4. Praca z kolorami (93)

• Wystarczy jedna definicja koloru (94)
• Funkcje rozjaśniania i przyciemniania kolorów (95)
  • Kolory HSL (95)
  • Składnia rozjaśniania i przyciemniania kolorów (96)
• Modyfikacja znaczników (97)
  • Technika clearfix w Compass (98)
• Powrót do kolorów (100)
  • Domieszki w domieszkach? Ki diabeł? (102)
• Funkcje complement i invert (105)
• Funkcja inwersji (106)
• Funkcja adjust-hue (107)
• Funkcje saturacji i desaturacji (108)
• Funkcje przezroczystości i zanikania (109)
• Funkcje opacify i fade-in (110)
• Funkcja grayscale (110)
• Funkcja rgba (111)
• Funkcja mix (112)
• Funkcja adjust-color (113)
• Funkcja scale-color (114)
• Funkcje shade i tint (115)
• Połączenie wszystkiego razem (116)
• Podsumowanie (117)

Rozdział 5. Responsywne i elastyczne siatki (119)

• Argumenty przeciwko siatkom (120)
• Argumenty za używaniem systemów siatkowych (121)
• Co to jest Susy (121)
  • Co tak naprawdę robi Susy (122)
• Instalowanie wtyczki do Compass Susy (123)
• Dołączanie Susy do projektu (124)
  • Zmienne projektowe (124)
• Tworzenie siatki Susy (125)
• Definiowanie kontekstu dla siatki (125)
  • Pokazywanie siatki w tle (127)
  • Ustawianie modelu blokowego (128)
• Tworzenie responsywnej siatki z myślą o urządzeniach przenośnych (128)
• Tworzenie punktów brzegowych przy użyciu Susy (129)
• Tworzenie całkiem płynnej siatki (134)
• Tworzenie statycznej siatki o stałej szerokości (135)
• Używanie udogodnień dostarczanych przez Susy (136)
  • Domieszki prefix, suffix i pad (136)
  • Domieszka prefix (136)
  • Domieszka suffix (138)
  • Domieszka pad (139)
• Domieszki pre, post, squish, push i pull (140)
  • Domieszka pre (140)
  • Domieszka post (140)
  • Domieszka squish (141)
  • Domieszki push i pull (141)
• Siatki w siatkach (141)
  • Domieszka nth-omega (142)
  • Pozycjonowanie w odniesieniu do kontenera (144)
  • Standardowa składnia i wyniki Susy (145)
• Podsumowanie (147)

Rozdział 6. Tworzenie zapytań medialnych za pomocą Sass i domieszek (149)

• Zapytania medialne w Sass (150)
  • Przenoszenie stylów dotyczących zapytań medialnych do osobnego pliku częściowego (151)
• Śródliniowe zapytania medialne z Sass (151)
• Tworzenie domieszki w celu ułatwienia sobie pracy z zapytaniami medialnymi (153)
  • Definiowanie punktów brzegowych jako zmiennych (153)
• Jak działa domieszka MQ (154)
• Wariacje motywu (155)
• Pisanie śródliniowych zapytań medialnych (156)
• Kompresja GZIP i CSS = zwycięstwo (161)
• Jaka jest prawdziwa różnica między rozsianymi i zgrupowanymi zapytaniami medialnymi (162)
• Robienie przeglądu kodu CSS (164)
• Podsumowanie (166)

Rozdział 7. CSS3, duszki i inne cuda (167)

• Domieszki Compass do CSS3 (168)
  • Składnia domieszki własności text-shadow (168)
• Składnia własności border-radius (170)
• Kolumny (171)
  • Składnia reguły kolumnowej (172)
• Domieszka box-shadow (172)
  • Składnia domieszki box-shadow (173)
  • Definiowanie wielu cieni (173)
• Gradienty w tle (175)
  • Składnia gradientu liniowego (175)
  • Składnia gradientu promienistego (177)
  • Kombinacje obrazów i gradientów w tle (177)
• Dodawanie obrazów do tła za pomocą funkcji pomocniczej Compass image-url (178)
• Określanie szerokości i wysokości obrazów za pomocą funkcji pomocniczych (179)
  • Pogromca bufora Compass (179)
• Duszki graficzne (180)
  • Dodatkowe opcje konfiguracyjne duszków (183)
  • Opcje układu (184)
• Domieszki do zamiany tekstu (184)
  • Domieszka hide-text (184)
  • Domieszka squish-text (185)
  • Zamienianie tekstu na obraz (186)
• Tworzenie adresów URI z danymi z obrazów (187)
  • Składnia wstawiania obrazów śródliniowych (188)
• Rozwiązania awaryjne na wypadek braku obsługi SVG (190)
• Przekształcenia CSS (190)
• Filtry CSS (193)
• Przejścia (195)
• Podsumowanie (195)

Rozdział 8. Logika programistyczna w Sass (197)

• Obliczenia matematyczne w Sass (198)
  • Dodawanie (198)
  • Odejmowanie (198)
  • Mnożenie (198)
  • Dzielenie (199)
  • Wykonywanie obliczeń przy użyciu zmiennych (200)
• Dyrektywy sterujące (201)
  • Dyrektywy sterujące @if i @else if (201)
  • Pętla @for (203)
  • Zmienna licznikowa (204)
  • Instrukcje from to i from through (205)
  • Pętla @each (206)
• Usuwanie i dodawanie jednostek (209)
  • Usuwanie jednostki z wartości zmiennej (209)
  • Dodawanie jednostki do wartości zmiennej (210)
• Pisanie funkcji w Sass (210)
  • Operatory równości i nierówności (211)
  • Operatory relacyjne (212)
  • Dyrektywa @return (212)
  • Sposób użycia wyniku działania funkcji (212)
• Dyrektywa @debug (213)
• Dyrektywa @warn (215)
• Podsumowanie (215)

Rozdział 9. Sass i Compass dla zaawansowanych (217)

• Wyłączenie obsługi wybranych przeglądarek w Compass (218)
  • Zmienne konfiguracyjne (219)
  • Opera przeszła na silnik WebKit (220)
• Dodawanie eksperymentalnej obsługi dla najnowszych własności CSS (221)
• Definiowanie wartości eksperymentalnych (223)
• Interaktywna powłoka Sass (223)
  • Interaktywny Compass (224)
• Dodawanie wtyczki Sass do importowania plików partiami (224)
• Tworzenie wielu osobnych plików CSS (226)
• Konwertowanie plików częściowych na samodzielne arkusze stylów (226)
• Statystyki Compass (226)
• Kasowanie zawartości bufora Sass (228)
• Wybieranie metody kompilacji kodu Sass na jeden raz (229)
• Sprawozdanie z misji (229)
  • Naprawianie błędów ludzkich (229)
  • Wychwytywanie typowych problemów za pomocą narzędzia lint (231)
• Fakty, nie przypuszczenia (232)
  • Wszyscy kochają Narzędzia dla programistów przeglądarki Chrome (232)
  • Wyszukiwanie nieużywanych stylów (235)
• Uwagi końcowe (236)
• Podsumowanie (236)

Skorowidz (237)