Sass. Nowoczesne arkusze stylów - ebook

Poznaj skuteczny sposób na tworzenie lepszych i wydajniejszych arkuszy stylów!

• Do czego przydaje się Sass?
• Jak go szybko opanować?
• Jak zastosować Sass w praktyce?
• Jak zoptymalizować swoje projekty?
• Jak uniknąć najczęstszych błędów?

Sass to metajęzyk, który umożliwiają szybsze i wydajniejsze tworzenie bardziej zaawansowanych arkuszy stylów, niż jest to możliwe przy użyciu samego języka CSS. Co więcej, ten świetny metajęzyk zapewnia pełną zgodność ze standardowym CSS-em. Sass eliminuje wady i ograniczenia CSS, a ponadto oferuje możliwości znane z języków programowania. Twórcom stron WWW przydaje się to szczególnie w dużych i rozbudowanych projektach komercyjnych. A wszystko to można osiągnąć niewielkim kosztem — jeśli znasz CSS, opanowanie Sass nie wymaga zbyt dużo czasu ani wysiłku.

Jeśli tworzysz strony WWW i chcesz wzbogacić swój warsztat o znajomość jednego z ciekawszych oraz najdynamiczniej rozwijających się narzędzi designerskich i deweloperskich, sięgnij po książkę „Sass. Praktyczny przewodnik”. Zrozumiesz dzięki niej zarówno podstawowe, jak i bardziej zaawansowane elementy składni języka, poznasz dobre praktyki tworzenia projektów Sass oraz nauczysz się je optymalizować. Zaznajomisz się również z praktycznymi przykładami zastosowania tego narzędzia i odkryjesz biblioteki i dodatki rozszerzające jego możliwości. Daj się wprowadzić w świat Sass!

• Podstawowe informacje na temat preprocesora Sass, jego działania i składni
• Zaawansowane elementy języka wraz z przykładami
• Liczne przykłady praktycznych technik przydatnych podczas tworzenia stron WWW
• Biblioteki i narzędzia ułatwiające pracę projektanta
• Techniki optymalizacji i zasady tworzenia prawidłowego kodu
• Metody pracy przy rozbudowanych projektach z wykorzystaniem wzorców i architektury
• Tworzenie skórek przy użyciu Sass i Bootstrap
• Instalacja i konfiguracja środowiska pracy i dodatków

Opanuj Sass i twórz przebojowe strony WWW w nowoczesny sposób!

Wstęp (9)

CZĘŚĆ I. PODSTAWY (13)

• Wprowadzenie (15)
  
  • Czym jest Sass? (15)
  • Dlaczego Sass? (15)
  • Inne preprocesory (16)
  • Sass i CSS (17)
  • Sass i SCSS - różne formaty (17)
• Sass w 10 minut - przegląd możliwości (18)
  
  • Zmienne (18)
  • Zagnieżdżanie (19)
  • Pliki cząstkowe i importowanie (20)
  • Domieszki (Mixins) (20)
  • Dziedziczenie (dyrektywa @extend) (21)
• Biblioteki i narzędzia rozszerzające Sass (24)
• Konwersja Sass do CSS - narzędzia (25)
  
  • Instalacja Ruby Sass przy użyciu wiersza poleceń (27)
  • Instalacja kompilatora w środowisku node (29)
• Edytory tekstu i Sass (31)
• Uwagi ogólne (32)
• Pierwszy kod (33)
• Zmienne (36)
  
  • Nazwy zmiennych (38)
  • Zasięg zmiennych (40)
  • Określanie wartości domyślnej i zmiennej globalnej (42)
• Zagnieżdżanie (44)
  
  • Selektor rodzica (48)
  • Zagnieżdżanie właściwości CSS (51)
  • Zagnieżdżanie media queries (52)
• Komentowanie kodu (54)
  
  • Ustawianie formatu wyjściowego CSS (54)
  • Rodzaje komentarzy (56)
  • Garść praktycznych porad (57)
• Dyrektywa @import - importowanie plików (59)
  
  • Importowanie plików cząstkowych (60)
  • Importowanie zagnieżdżone (60)
  • Podstawowa struktura projektu (61)
  • Pliki cząstkowe, zmienne i flaga !default (63)
• Proste operacje arytmetyczne (65)
• Praca z kolorami (68)
  
  • Modele HSL, RGB, RGBA (69)
  • Funkcje działające w oparciu o HSL (70)
  • Funkcje działające w oparciu o RGB(A) (72)
  • Inne funkcje do pracy z kolorami (72)
  • Użycie funkcji do pracy z kolorami w kodzie (74)
• Znajdowanie błędów w kodzie (75)
• Dyrektywa @mixin - domieszki (76)
  
  • Przekazywanie argumentów do domieszki (81)
  • Wartości domyślne (82)
  • Argumenty nazwane (83)
  • Nieokreślona liczba argumentów (83)
  • Przekazywanie zawartości do domieszek (dyrektywa @content) (84)
  • Przykłady użycia domieszek (86)
  • Kiedy używać domieszek (88)
• Dyrektywa @extend - dziedziczenie i rozszerzenia (90)
  
  • Kiedy używać dziedziczenia (100)
• Placeholders - selektory zastępcze (101)
• Domieszki, rozszerzenia, selektory zastępcze - kiedy stosować? (104)
• Podsumowanie - co powinieneś wiedzieć (108)

CZĘŚĆ II. TECHNIKI ZAAWANSOWANE (111)

• Wprowadzenie (113)
• Logika programistyczna w Sass (114)
• Typy danych (115)
  
  • Wartości numeryczne (115)
  • Łańcuchy tekstowe (116)
  • Kolory (117)
  • Wartości logiczne (typ boolowski) (117)
  • Wartość nieokreślona null (118)
  • Listy (119)
  • Mapy (120)
• Interpolacja (122)
• Powłoka interaktywna Sass (124)
• Instrukcja warunkowa if (126)
• Pętle (129)
  
  • Pętla @for (129)
  • Pętla @while (131)
  • Pętla @each (132)
  • Jak wybrać odpowiedni typ pętli? (135)
• Funkcje wbudowane Sass (136)
  
  • Funkcje do przetwarzania łańcuchów tekstowych (137)
  • Funkcje do pracy z liczbami (137)
  • Funkcje do przetwarzania list (139)
  • Funkcje do przetwarzania map (140)
  • Funkcje introspekcyjne (145)
  • Funkcje do operacji na selektorach (148)
  • Funkcje niesklasyfikowane (148)
• Tworzenie własnych funkcji (150)
  
  • Własna funkcja czy domieszka? (151)
• Podsumowanie - co powinieneś wiedzieć (152)

CZĘŚĆ III. DOBRE PRAKTYKI I OPTYMALIZACJA PROJEKTÓW SASS (155)

• Wprowadzenie (157)
• Optymalizacja technik Sass (159)
  
  • Stosowanie zmiennych (159)
  • Zagnieżdżanie selektorów (161)
  • Domieszki, rozszerzenia i selektory zastępcze (162)
  • Funkcje i pętle (164)
  • Importowanie (165)
  • Instrukcja warunkowa (166)
  • Debugowanie kodu przy użyciu map źródłowych (source maps) (166)
• Architektura projektów (169)
  
  • Pliki cząstkowe i importowanie (170)
  • Struktura i podział (170)
  • Dzielenie interfejsu na komponenty (172)
  • Przegląd architektur CSS i systemów organizacji kodu (173)
• Konwencje i styl kodu (193)
  
  • Styl, składnia i formatowanie (193)
  • Komentarze (197)
  • Konwencje nazw elementów składni Sass (199)
  • Przedrostki producentów (201)
• Tworzenie kodu produkcyjnego (202)
• Podsumowanie - co powinieneś wiedzieć (204)

CZĘŚĆ IV. SASS W PRAKTYCE (207)

• Praktyczne przykłady zastosowania (209)
  
  • Zerowanie stylów (209)
  • Zapytania medialne i strony responsywne (209)
  • Technika clearfix (211)
  • Zamiana jednostek (212)
  • Centrowanie elementów (213)
  • Generowanie przycisków (213)
  • Określanie wyglądu linków (215)
  • Szybkie określanie pozycji elementu (215)
  • Szybkie określanie rozmiaru elementu (216)
  • Przycinanie zbyt długiego tekstu (216)
  • Tworzenie układu strony i siatek (216)
  • Typografia w Sass (218)
  • Zastosowanie list i map (220)
  • Tworzenie szablonów tematycznych (themes) (224)
  • Pozostałe techniki (230)
  • Sass i Bootstrap (231)

CZĘŚĆ V. BIBLIOTEKI I DODATKI DO SASS (243)

• Wprowadzenie (245)
• Omówienie wybranych narzędzi i bibliotek (246)
• Bourbon - przydatna kolekcja domieszek (249)
  
  • Instalacja (250)
  • Przegląd praktycznych dodatków biblioteki Bourbon (251)
  • Przegląd innych domieszek biblioteki Bourbon (255)
  • Przegląd funkcji biblioteki Bourbon (257)
• Neat (260)
  
  • Instalacja (260)
  • Konfiguracja siatki (261)
  • Określanie rozpiętości elementu (263)
  • Zagnieżdżanie siatki (264)
  • Przesuwanie elementów na siatce (266)
  • Dodawanie elementów responsywnych (266)
  • Definiowanie kontekstów (268)
• Breakpoint (270)
  
  • Tworzenie prostych zapytań medialnych (media queries) (270)
  • Określanie docelowego typu mediów (272)
  • Określanie właściwości (272)
  • Określanie docelowej rozdzielczości (273)
• Sass-mq (275)
• Narzędzia Sass do typografii (277)

Uwagi końcowe (281)

DODATEK A. Ściąga (283)

• Zmienne (283)
• Zagnieżdżanie (284)
• Komentarze (285)
• Importowanie plików cząstkowych (285)
• Domieszki (285)
• Dyrektywa @extend (287)
• Pętle i instrukcje warunkowe (287)
• Typy danych (288)
• Funkcje do przetwarzania łańcuchów tekstowych (289)
• Funkcje do pracy z kolorami (290)
• Funkcje do pracy z liczbami (291)
• Funkcje do przetwarzania list (292)
• Funkcje do przetwarzania map (293)
• Funkcje introspekcyjne (294)

DODATEK B. Przydatne materiały (297)

Skorowidz (298)