Sass. Nowoczesne arkusze styló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 innych 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. Nowoczesne arkusze stylów. 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 oraz bibliotekami i dodatkami rozszerzającymi 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!

Sass Kurs

W darmowym rozdziale poznamy Sass podstawy, dokładnie została przedstawiona optymalizacja technik Sass. Wyjaśniono dlaczego w Sass zmienne powinny być używane z rozwagą.

Sass Domieszki

Darmowy rozdział:

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)

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)

Informatyka » HTML i CSS