Sass_i_Compass_Praktyczny_przewodnik_dla_projektantow_saasco.pdf

(1366 KB) Pobierz
Tytuł oryginału: Sass and Compass for Designers
Tłumaczenie: Łukasz Piwko
ISBN: 978-83-283-1762-8
Copyright © Packt Publishing 2013
First published in the English language under the title ‘Sass and Compass for Designers’
— 9781849694544.
Polish edition copyright © 2016 by Helion S.A.
All rights reserved.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,
fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich
właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były
kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane
z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION
nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji
zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail:
helion@helion.pl
WWW:
http://helion.pl
(księgarnia internetowa, katalog książek)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/saasco.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/saasco
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
Kup książkę
Poleć książkę
Oceń książkę
Księgarnia internetowa
Lubię to! » Nasza społeczność
Spis tre ci
Zespó wydania oryginalnego
Przedmowa
O autorze
O korektorach merytorycznych
Wprowadzenie
Rozdzia 1. Sass i Compass dla pocz tkuj cych
Do czego s u preprocesory CSS
Skoro ostatecznym wynikiem jest kod CSS, to lepiej od razu pisa kod CSS
Dlaczego nale y u ywa w a nie Sass i Compass
Zmienne (aby warto ci definiowa tylko raz)
Automatyczne kolory w formacie RGBA i konwersje
Zapomnij o przedrostkach producentów
Zagnie d anie regu
Prostsze zapytania medialne
Automatyczna kompresja kodu CSS i przyspieszenie dzia ania strony
Czym jest Sass
Czym jest Compass
Instalacja Sass i Compass
Instalacja pakietu dla systemu OS X
Instalacja Sass i Compass i praca z nimi w wierszu polece
Instalacja interpretera Ruby w systemie Windows
Polecenie gem
Instalacja z wiersza polece w systemie Mac OS X
Instalacja z wiersza polece w systemie Windows
Sprawdzanie wersji Compass i Sass
Sprawdzanie, które wersje Sass i Compass s dost pne
Instalowanie najnowszej wersji Sass i Compass (w cznie z wydaniami wst pnymi)
Tworzenie projektu Sass i Compass z poziomu wiersza polece
Automatyczne kompilowanie kodu na CSS z poziomu wiersza polece
9
11
13
15
17
21
22
23
23
23
24
25
26
27
28
29
29
30
30
31
31
32
32
33
35
35
36
37
38
Kup książkę
Poleć książkę
Spis tre ci
Graficzne narz dzia do pracy z Sass i Compass
Scout
CodeKit
LiveReload
Praca z plikami Sass w edytorach tekstu
Podsumowanie
38
38
39
40
41
42
Rozdzia 2. Tworzenie projektu Sass i Compass
Tworzenie projektu Sass i Compass
Tworzenie projektów Compass
Struktura pliku config.rb
Dodawanie niezb dnych wtyczek
Ustawianie nazw i cie ek do zasobów
Ustawianie stylu wyj ciowego CSS
Tworzenie i u ywanie plików cz ciowych
Sass zapewnia kod gotowy do produkcji i atwy w obs udze
Importowanie pliku cz ciowego
Sk adnia definicji zmiennych w Sass
Rodzaje komentarzy w j zyku Sass
Standardowe komentarze CSS
Jednowierszowe komentarze Sass
Podstawowy plik index.html
Podstawa dla przysz ych projektów
Podsumowanie
43
44
45
48
49
50
50
54
55
56
57
58
58
58
59
60
60
Rozdzia 3. Zagnie d anie, rozszerzanie, symbole zast pcze i domieszki
Stylizowanie strony za pomoc technologii Sass i Compass
Oddzielanie uk adu od elementów wizualnych
Co to jest zagnie d anie kodu i jak umo liwia ono tworzenie modu ów
Sk adanie zagnie d ania
Dodawanie stylów Modernizr za pomoc selektora rodzica
Zagnie d anie przestrzeni nazw
Rozszerzanie istniej cych regu za pomoc dyrektywy @extend
Rozszerzanie stylów, gdy jest taka konieczno , za pomoc selektorów zast pczych
Co to s domieszki i jak za ich pomoc definiowa cz sto u ywane fragmenty kodu
Podstawowa sk adnia domieszek
Jak pisa domieszki z ustawieniami domy lnymi
Ostrze enie co do generowanego kodu CSS
Podsumowanie
63
64
65
68
68
73
79
82
84
85
87
88
91
91
Rozdzia 4. Praca z kolorami
Wystarczy jedna definicja koloru
Funkcje rozja niania i przyciemniania kolorów
Kolory HSL
Sk adnia rozja niania i przyciemniania kolorów
93
94
95
95
96
4
Kup książkę
Poleć książkę
Spis tre ci
Modyfikacja znaczników
Technika clearfix w Compass
Powrót do kolorów
Domieszki w domieszkach? Ki diabe ?
Funkcje complement i invert
Funkcja inwersji
Funkcja adjust-hue
Funkcje saturacji i desaturacji
Funkcje przezroczysto ci i zanikania
Funkcje opacify i fade-in
Funkcja grayscale
Funkcja rgba
Funkcja mix
Funkcja adjust-color
Funkcja scale-color
Funkcje shade i tint
Po czenie wszystkiego razem
Podsumowanie
97
98
100
102
105
106
107
108
109
110
110
111
112
113
114
115
116
117
Rozdzia 5. Responsywne i elastyczne siatki
Argumenty przeciwko siatkom
Argumenty za u ywaniem systemów siatkowych
Co to jest Susy
Co tak naprawd robi Susy
Instalowanie wtyczki do Compass Susy
Do czanie Susy do projektu
Zmienne projektowe
Tworzenie siatki Susy
Definiowanie kontekstu dla siatki
Pokazywanie siatki w tle
Ustawianie modelu blokowego
Tworzenie responsywnej siatki z my l o urz dzeniach przeno nych
Tworzenie punktów brzegowych przy u yciu Susy
Tworzenie ca kiem p ynnej siatki
Tworzenie statycznej siatki o sta ej szeroko ci
U ywanie udogodnie dostarczanych przez Susy
Domieszki prefix, suffix i pad
Domieszka prefix
Domieszka suffix
Domieszka pad
Domieszki pre, post, squish, push i pull
Domieszka pre
Domieszka post
Domieszka squish
Domieszki push i pull
119
120
121
121
122
123
124
124
125
125
127
128
128
129
134
135
136
136
136
138
139
140
140
140
141
141
5
Kup książkę
Poleć książkę
Zgłoś jeśli naruszono regulamin