Sass i Compass. Praktyczny przewodnik. Ben Frain

Sass i Compass. Praktyczny przewodnik. Ben Frain - Opis

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 (...) więcej 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!
Spis treści: 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)
O autorze: Ben Frain — projektant stron internetowych, starszy programista frontendowy w firmie Bet365. Kiedyś był niedocenionym (i skromnym) aktorem telewizyjnym. Napisał też cztery równie niedocenione (jego zdaniem) scenariusze i wciąż żywi (słabnącą) nadzieję, że w końcu uda mu się sprzedać choćby jeden z nich. W oczekiwaniu na ten piękny dzień pisze książki o tajnikach projektowania stron WWW. mniej