Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00004 003782 12920914 na godz. na dobę w sumie
Sass i Compass. Praktyczny przewodnik dla projektantów - książka
Sass i Compass. Praktyczny przewodnik dla projektantów - książka
Autor: Liczba stron: 240
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-1762-8 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> programowanie >> ruby - programowanie
Porównaj ceny (książka, ebook (-25%), audiobook).

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

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 skrócą Ci drogę do pięknych stron!


Ben Frain — jest projektantem i programistą stron internetowych od 1996 r. Regularnie pisuje artykuły techniczne poświęcone platformie Mac, technologiom konsumenckim, projektowaniu stron internetowych oraz lotnictwu. Jest autorem bestsellera Responsive Web Design. Ukończył studia związane z mediami i sztuką performance na Uniwersytecie w Salford. Można go znaleźć na stronie internetowej www.benfrain.com i na Twitterze pod adresem twitter.com/benfrain.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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(cid:258)ci Zespó(cid:239) wydania oryginalnego Przedmowa O autorze O korektorach merytorycznych Wprowadzenie Rozdzia(cid:239) 1. Sass i Compass dla pocz(cid:200)tkuj(cid:200)cych Do czego s(cid:239)u(cid:285)(cid:200) preprocesory CSS Skoro ostatecznym wynikiem jest kod CSS, to lepiej od razu pisa(cid:202) kod CSS Dlaczego nale(cid:285)y u(cid:285)ywa(cid:202) w(cid:239)a(cid:258)nie Sass i Compass Zmienne (aby warto(cid:258)ci definiowa(cid:202) tylko raz) Automatyczne kolory w formacie RGBA i konwersje Zapomnij o przedrostkach producentów Zagnie(cid:285)d(cid:285)anie regu(cid:239) Prostsze zapytania medialne Automatyczna kompresja kodu CSS i przyspieszenie dzia(cid:239)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(cid:241) Instalacja interpretera Ruby w systemie Windows Polecenie gem Instalacja z wiersza polece(cid:241) w systemie Mac OS X Instalacja z wiersza polece(cid:241) w systemie Windows Sprawdzanie wersji Compass i Sass Sprawdzanie, które wersje Sass i Compass s(cid:200) dost(cid:218)pne Instalowanie najnowszej wersji Sass i Compass (w(cid:239)(cid:200)cznie z wydaniami wst(cid:218)pnymi) Tworzenie projektu Sass i Compass z poziomu wiersza polece(cid:241) Automatyczne kompilowanie kodu na CSS z poziomu wiersza polece(cid:241) 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 Poleć książkęKup książkę Spis tre(cid:286)ci Graficzne narz(cid:218)dzia do pracy z Sass i Compass Scout CodeKit LiveReload Praca z plikami Sass w edytorach tekstu Podsumowanie Rozdzia(cid:239) 2. Tworzenie projektu Sass i Compass Tworzenie projektu Sass i Compass Tworzenie projektów Compass Struktura pliku config.rb Dodawanie niezb(cid:218)dnych wtyczek Ustawianie nazw i (cid:258)cie(cid:285)ek do zasobów Ustawianie stylu wyj(cid:258)ciowego CSS Tworzenie i u(cid:285)ywanie plików cz(cid:218)(cid:258)ciowych Sass zapewnia kod gotowy do produkcji i (cid:239)atwy w obs(cid:239)udze Importowanie pliku cz(cid:218)(cid:258)ciowego Sk(cid:239)adnia definicji zmiennych w Sass Rodzaje komentarzy w j(cid:218)zyku Sass Standardowe komentarze CSS Jednowierszowe komentarze Sass Podstawowy plik index.html Podstawa dla przysz(cid:239)ych projektów Podsumowanie Rozdzia(cid:239) 3. Zagnie(cid:285)d(cid:285)anie, rozszerzanie, symbole zast(cid:218)pcze i domieszki Stylizowanie strony za pomoc(cid:200) technologii Sass i Compass Oddzielanie uk(cid:239)adu od elementów wizualnych Co to jest zagnie(cid:285)d(cid:285)anie kodu i jak umo(cid:285)liwia ono tworzenie modu(cid:239)ów Sk(cid:239)adanie zagnie(cid:285)d(cid:285)ania Dodawanie stylów Modernizr za pomoc(cid:200) selektora rodzica Zagnie(cid:285)d(cid:285)anie przestrzeni nazw Rozszerzanie istniej(cid:200)cych regu(cid:239) za pomoc(cid:200) dyrektywy @extend Rozszerzanie stylów, gdy jest taka konieczno(cid:258)(cid:202), za pomoc(cid:200) selektorów zast(cid:218)pczych Co to s(cid:200) domieszki i jak za ich pomoc(cid:200) definiowa(cid:202) cz(cid:218)sto u(cid:285)ywane fragmenty kodu Podstawowa sk(cid:239)adnia domieszek Jak pisa(cid:202) domieszki z ustawieniami domy(cid:258)lnymi Ostrze(cid:285)enie co do generowanego kodu CSS Podsumowanie Rozdzia(cid:239) 4. Praca z kolorami Wystarczy jedna definicja koloru Funkcje rozja(cid:258)niania i przyciemniania kolorów Kolory HSL Sk(cid:239)adnia rozja(cid:258)niania i przyciemniania kolorów 4 38 38 39 40 41 42 43 44 45 48 49 50 50 54 55 56 57 58 58 58 59 60 60 63 64 65 68 68 73 79 82 84 85 87 88 91 91 93 94 95 95 96 Poleć książkęKup książkę Spis tre(cid:286)ci Modyfikacja znaczników Technika clearfix w Compass Powrót do kolorów Domieszki w domieszkach? Ki diabe(cid:239)? Funkcje complement i invert Funkcja inwersji Funkcja adjust-hue Funkcje saturacji i desaturacji Funkcje przezroczysto(cid:258)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(cid:239)(cid:200)czenie wszystkiego razem Podsumowanie Rozdzia(cid:239) 5. Responsywne i elastyczne siatki Argumenty przeciwko siatkom Argumenty za u(cid:285)ywaniem systemów siatkowych Co to jest Susy Co tak naprawd(cid:218) robi Susy Instalowanie wtyczki do Compass Susy Do(cid:239)(cid:200)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(cid:258)l(cid:200) o urz(cid:200)dzeniach przeno(cid:258)nych Tworzenie punktów brzegowych przy u(cid:285)yciu Susy Tworzenie ca(cid:239)kiem p(cid:239)ynnej siatki Tworzenie statycznej siatki o sta(cid:239)ej szeroko(cid:258)ci U(cid:285)ywanie udogodnie(cid:241) 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 97 98 100 102 105 106 107 108 109 110 110 111 112 113 114 115 116 117 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 Poleć książkęKup książkę Spis tre(cid:286)ci Siatki w siatkach Domieszka nth-omega Pozycjonowanie w odniesieniu do kontenera Standardowa sk(cid:239)adnia i wyniki Susy Podsumowanie Rozdzia(cid:239) 6. Tworzenie zapyta(cid:241) medialnych za pomoc(cid:200) Sass i domieszek Zapytania medialne w Sass Przenoszenie stylów dotycz(cid:200)cych zapyta(cid:241) medialnych do osobnego pliku cz(cid:218)(cid:258)ciowego (cid:165)ródliniowe zapytania medialne z Sass Tworzenie domieszki w celu u(cid:239)atwienia sobie pracy z zapytaniami medialnymi Definiowanie punktów brzegowych jako zmiennych Jak dzia(cid:239)a domieszka MQ Wariacje motywu Pisanie (cid:258)ródliniowych zapyta(cid:241) medialnych Kompresja GZIP i CSS = zwyci(cid:218)stwo Jaka jest prawdziwa ró(cid:285)nica mi(cid:218)dzy rozsianymi i zgrupowanymi zapytaniami medialnymi Robienie przegl(cid:200)du kodu CSS Podsumowanie Rozdzia(cid:239) 7. CSS3, duszki i inne cuda Domieszki Compass do CSS3 Sk(cid:239)adnia domieszki w(cid:239)asno(cid:258)ci text-shadow Sk(cid:239)adnia w(cid:239)asno(cid:258)ci border-radius Kolumny Sk(cid:239)adnia regu(cid:239)y kolumnowej Domieszka box-shadow Sk(cid:239)adnia domieszki box-shadow Definiowanie wielu cieni Gradienty w tle Sk(cid:239)adnia gradientu liniowego Sk(cid:239)adnia gradientu promienistego Kombinacje obrazów i gradientów w tle Dodawanie obrazów do t(cid:239)a za pomoc(cid:200) funkcji pomocniczej Compass image-url Okre(cid:258)lanie szeroko(cid:258)ci i wysoko(cid:258)ci obrazów za pomoc(cid:200) funkcji pomocniczych Pogromca bufora Compass Duszki graficzne Dodatkowe opcje konfiguracyjne duszków Opcje uk(cid:239)adu Domieszki do zamiany tekstu Domieszka hide-text Domieszka squish-text Zamienianie tekstu na obraz Tworzenie adresów URI z danymi z obrazów Sk(cid:239)adnia wstawiania obrazów (cid:258)ródliniowych 6 141 142 144 145 147 149 150 151 151 153 153 154 155 156 161 162 164 166 167 168 168 170 171 172 172 173 173 175 175 177 177 178 179 179 180 183 184 184 184 185 186 187 188 Poleć książkęKup książkę Spis tre(cid:286)ci Rozwi(cid:200)zania awaryjne na wypadek braku obs(cid:239)ugi SVG Przekszta(cid:239)cenia CSS Filtry CSS Przej(cid:258)cia Podsumowanie Rozdzia(cid:239) 8. Logika programistyczna w Sass Obliczenia matematyczne w Sass Dodawanie Odejmowanie Mno(cid:285)enie Dzielenie Wykonywanie oblicze(cid:241) przy u(cid:285)yciu zmiennych Dyrektywy steruj(cid:200)ce Dyrektywy steruj(cid:200)ce @if i @else if P(cid:218)tla @for Zmienna licznikowa Instrukcje from to i from through P(cid:218)tla @each Usuwanie i dodawanie jednostek Usuwanie jednostki z warto(cid:258)ci zmiennej Dodawanie jednostki do warto(cid:258)ci zmiennej Pisanie funkcji w Sass Operatory równo(cid:258)ci i nierówno(cid:258)ci Operatory relacyjne Dyrektywa @return Sposób u(cid:285)ycia wyniku dzia(cid:239)ania funkcji Dyrektywa @debug Dyrektywa @warn Podsumowanie Rozdzia(cid:239) 9. Sass i Compass dla zaawansowanych Wy(cid:239)(cid:200)czenie obs(cid:239)ugi wybranych przegl(cid:200)darek w Compass Zmienne konfiguracyjne Opera przesz(cid:239)a na silnik WebKit Dodawanie eksperymentalnej obs(cid:239)ugi dla najnowszych w(cid:239)asno(cid:258)ci CSS Definiowanie warto(cid:258)ci eksperymentalnych Interaktywna pow(cid:239)oka Sass Interaktywny Compass Dodawanie wtyczki Sass do importowania plików partiami Tworzenie wielu osobnych plików CSS Konwertowanie plików cz(cid:218)(cid:258)ciowych na samodzielne arkusze stylów Statystyki Compass Kasowanie zawarto(cid:258)ci bufora Sass Wybieranie metody kompilacji kodu Sass na jeden raz 190 190 193 195 195 197 198 198 198 198 199 200 201 201 203 204 205 206 209 209 210 210 211 212 212 212 213 215 215 217 218 219 220 221 223 223 224 224 226 226 226 228 229 7 Poleć książkęKup książkę Spis tre(cid:286)ci Sprawozdanie z misji Naprawianie b(cid:239)(cid:218)dów ludzkich Wychwytywanie typowych problemów za pomoc(cid:200) narz(cid:218)dzia lint Fakty, nie przypuszczenia Wszyscy kochaj(cid:200) Narz(cid:218)dzia dla programistów przegl(cid:200)darki Chrome Wyszukiwanie nieu(cid:285)ywanych stylów Uwagi ko(cid:241)cowe Podsumowanie Skorowidz 229 229 231 232 232 235 236 236 237 8 Poleć książkęKup książkę 1 Sass i Compass dla pocz(cid:200)tkuj(cid:200)cych Arkusze napisane przy u(cid:285)yciu Sass i Compass s(cid:200) elastyczniejsze i (cid:239)atwiejsze w obs(cid:239)udze ser- wisowej, tworzy si(cid:218) je szybciej ni(cid:285) tradycyjne arkusze stylów. Dlatego w(cid:239)a(cid:258)nie takie firmy jak eBay, bet365.com, BBS, Instagram, LinkedIn, Square i Groupon korzystaj(cid:200) z tych rozwi(cid:200)za(cid:241) w swojej dzia(cid:239)alno(cid:258)ci. Przez d(cid:239)ugi czas nie mog(cid:239)em przekona(cid:202) si(cid:218) do Sass i Compass, poniewa(cid:285) ba(cid:239)em si(cid:218) pocz(cid:200)tko- wych trudno(cid:258)ci. Na sam(cid:200) my(cid:258)l, (cid:285)e musia(cid:239)bym u(cid:285)y(cid:202) wiersza polece(cid:241), aby wszystko przygoto- wa(cid:202), dostawa(cid:239)em g(cid:218)siej skórki. Gdy tylko napotyka(cid:239)em instrukcje w rodzaju „zainstaluj gemy Ruby” albo „wykonaj polecenie watch”, by(cid:239)o po mnie. Cytuj(cid:200)c Doktora Z(cid:239)o: „Niech mi kto(cid:258), do diab(cid:239)a, pomo(cid:285)e!”. Je(cid:258)li jeste(cid:258) projektantem, to mog(cid:239)e(cid:258) mie(cid:202) podobne odczucia do moich. Celem tej ksi(cid:200)(cid:285)ki jest wy- ja(cid:258)nienie, jak dzia(cid:239)aj(cid:200) Sass i Compass, oraz u(cid:239)atwienie rozpocz(cid:218)cia pracy z nimi. Dzi(cid:218)ki temu b(cid:218)- dziesz móg(cid:239) wykorzysta(cid:202) wszystkie mo(cid:285)liwo(cid:258)ci tych technologii w swojej pracy. Jednocze(cid:258)nie zapewniam Ci(cid:218), (cid:285)e je(cid:258)li znasz HTML i CSS, to bez trudu opanujesz te(cid:285) Sass i Compass. Sass to wed(cid:239)ug oficjalnego opisu metaj(cid:218)zyk, cho(cid:202) cz(cid:218)(cid:258)ciej okre(cid:258)la si(cid:218) go preprocesorem CSS. Jak zwa(cid:239), tak zwa(cid:239). Wa(cid:285)ne jest to, (cid:285)e Sass jest (cid:239)atwy w u(cid:285)yciu. Kod pisze si(cid:218) w jednym pliku (pliku Sass z rozszerzeniem .scss), który w chwili zapisywania jest konwertowany na dobrze Ci znany kod CSS (a je(cid:258)li nie znasz CSS, od(cid:239)ó(cid:285) t(cid:218) ksi(cid:200)(cid:285)k(cid:218) i si(cid:218)gnij na inn(cid:200) pó(cid:239)k(cid:218)). Pliki Sass tworzy si(cid:218) bardzo (cid:239)atwo. Wystarczy wzi(cid:200)(cid:202) dowolny plik CSS i zmieni(cid:202) jego rozsze- rzenie .css na .scss. W ten sposób powstanie kompletny plik Sass, do którego mo(cid:285)na dodawa(cid:202) elementy sk(cid:239)adni j(cid:218)zyka Sass. Traktuj go po prostu jak CSS z turbodo(cid:239)adowaniem. Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów Je(cid:258)li wci(cid:200)(cid:285) martwisz si(cid:218) wierszem polece(cid:241), to przesta(cid:241) ju(cid:285) si(cid:218) l(cid:218)ka(cid:202). Powsta(cid:239)o kilka (cid:239)atwych w obs(cid:239)udze narz(cid:218)dzi z graficznym interfejsem u(cid:285)ytkownika do pracy z Sass i Compass. Ich opis znajduje si(cid:218) w dalszej cz(cid:218)(cid:258)ci tego rozdzia(cid:239)u (w której opisuj(cid:218) te(cid:285) techniki pracy z wierszem polece(cid:241) dla tych, którzy s(cid:200) w bojowym nastroju). Jako (cid:285)e ta ksi(cid:200)(cid:285)ka jest przeznaczona dla projektantów, oprócz wychwalania wszelkich zalet Sass i Compass w rozdziale tym znajdziesz te(cid:285) wyja(cid:258)nienie, co w ogóle oznaczaj(cid:200) te dwie nazwy, co wi(cid:200)(cid:285)e te dwie technologie oraz jak je zainstalowa(cid:202). Potem b(cid:218)dziesz gotowy do rozpocz(cid:218)cia pracy nad pierwszym projektem. Podsumowuj(cid:200)c, w rozdziale tym dowiesz si(cid:218): (cid:81) dlaczego preprocesory CSS s(cid:200) potrzebne; (cid:81) dlaczego nale(cid:285)y u(cid:285)ywa(cid:202) w(cid:239)a(cid:258)nie Sass i Compass; (cid:81) czym jest Sass; (cid:81) czym jest Compass i jaki ma zwi(cid:200)zek z Sass; (cid:81) jak zainstalowa(cid:202) Sass i Compass w systemach OS X i Windows; (cid:81) jakie s(cid:200) dost(cid:218)pne graficzne narz(cid:218)dzia, którymi mo(cid:285)na zast(cid:200)pi(cid:202) wiersz polece(cid:241); (cid:81) jakie s(cid:200) ró(cid:285)ne sk(cid:239)adnie Sass. Do czego s(cid:239)u(cid:285)(cid:200) preprocesory CSS CSS to j(cid:218)zyk deklaracji, a nie programowania. Oznacza to, (cid:285)e w(cid:239)asno(cid:258)ci i warto(cid:258)ci stylistyczne wpisywane w arkuszach stylów s(cid:200) wykorzystywane bezpo(cid:258)rednio przez przegl(cid:200)dark(cid:218) do rysowa- nia na ekranie. J(cid:218)zyk programowania natomiast s(cid:239)u(cid:285)y do definiowania pewnej logiki. Mówi(cid:200)c pro(cid:258)ciej, instrukcja logiczna mo(cid:285)e mie(cid:202) nast(cid:218)puj(cid:200)c(cid:200) tre(cid:258)(cid:202): je(cid:258)li elementy h1 znajduj(cid:200) si(cid:218) w elemencie nav, pokoloruj je na niebiesko; je(cid:258)li znajduj(cid:200) si(cid:218) w elemencie header, nadaj im kolor czerwony. Ponadto j(cid:218)zyki programowania zawieraj(cid:200) zmienne. S(cid:200) one czym(cid:258) w rodzaju magazynów do przechowywania ró(cid:285)nych rzeczy, które mog(cid:200) by(cid:202) przydatne w pó(cid:283)niejszym czasie (na przyk(cid:239)ad w zmiennej mo(cid:285)na zapisa(cid:202) warto(cid:258)(cid:202) koloru). Co wi(cid:218)cej, w j(cid:218)zykach pro- gramowania wyst(cid:218)puj(cid:200) funkcje s(cid:239)u(cid:285)(cid:200)ce do wykonywania dzia(cid:239)a(cid:241) na warto(cid:258)ciach (na przyk(cid:239)ad rozja(cid:258)nij ten kolor o 20 procent). Sass i Compass pozwalaj(cid:200) na korzystanie z tych i wielu in- nych mechanizmów. Nie martw si(cid:218), je(cid:258)li nie zrozumia(cid:239)e(cid:258) wszystkich s(cid:239)ów w poprzednim akapicie. Wszystko si(cid:218) wyja- (cid:258)ni w odpowiednim czasie. Jednak najpierw rozprawimy si(cid:218) z kilkoma mitami na temat pre- procesorów CSS. 22 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Sass i Compass dla pocz(cid:261)tkuj(cid:261)cych Skoro ostatecznym wynikiem jest kod CSS, to lepiej od razu pisa(cid:202) kod CSS Gdy pierwszy raz natkn(cid:200)(cid:239)em si(cid:218) na preprocesor CSS Sass, pomy(cid:258)la(cid:239)em: „Skoro ostatecznym wynikiem jest kod CSS, to czy nie lepiej od razu pisa(cid:202) kod CSS?”. Podobnie zareagowa(cid:239)o wiele innych osób. W ko(cid:241)cu u(cid:285)ywamy CSS na co dzie(cid:241). Za pomoc(cid:200) arkuszy stylów jeste(cid:258)my w stanie naprawi(cid:202) praktycznie ka(cid:285)dy problem z uk(cid:239)adem strony, zbudowa(cid:202) responsywn(cid:200) stron(cid:218) internetow(cid:200), która b(cid:218)dzie pi(cid:218)knie wygl(cid:200)da(cid:239)a na wszystkich urz(cid:200)dzeniach, i ogólnie, korzystaj(cid:200)c z arkuszy stylów przez wi(cid:218)kszo(cid:258)(cid:202) czasu, mamy odczucie, (cid:285)e dobrze wiemy, co robimy. Wyja(cid:258)nijmy sobie pewne rzeczy ju(cid:285) teraz. Sass nie sprawi automatycznie, (cid:285)e Twój kod CSS stanie si(cid:218) lepszy. Na przyk(cid:239)ad je(cid:258)li jeszcze dobrze nie rozumiesz CSS, to Sass i Compass nie pomog(cid:200) Ci uzupe(cid:239)ni(cid:202) braków wiedzy. Jednak dzi(cid:218)ki Sass z pewno(cid:258)ci(cid:200) b(cid:218)dziesz szybciej pisa(cid:202) arkusze stylów i (cid:239)atwiej Ci b(cid:218)dzie nad nimi zapanowa(cid:202). Sass, LESS czy Stylus? Skoro czytasz t(cid:218) ksi(cid:200)(cid:285)k(cid:218), to mo(cid:285)liwe, (cid:285)e ju(cid:285) si(cid:218) troch(cid:218) porozgl(cid:200)da(cid:239)e(cid:258) i wybra(cid:239)e(cid:258) Sass zamiast LESS lub Stylus. LESS i Stylus to tak(cid:285)e preprocesory CSS o podobnym zastosowaniu jak Sass. Moim skromnym zdaniem Sass jest najlepszy i ma najwi(cid:218)ksze mo(cid:285)liwo(cid:258)ci, ale musz(cid:218) przyzna(cid:202), (cid:285)e dokumentacja LESS jest dla pocz(cid:200)tkuj(cid:200)cego bardziej przyst(cid:218)pna. Je(cid:258)li chcia(cid:239)by(cid:258) zobaczy(cid:202) porównanie technologii Sass i LESS z wyka- zem mocnych i s(cid:239)abych stron obu, zajrzyj na stron(cid:218) CSS Tricks, na której mistrz Chris Coyier zamie(cid:258)ci(cid:239) artyku(cid:239) na ten temat (http://css-tricks.com/sass-vs-less/). Dlaczego nale(cid:285)y u(cid:285)ywa(cid:202) w(cid:239)a(cid:258)nie Sass i Compass Jak napisa(cid:239)em wcze(cid:258)niej, lista firm korzystaj(cid:200)cych z Sass i Compass do pisania i obs(cid:239)ugi ka- skadowych arkuszy stylów ci(cid:200)gle si(cid:218) wyd(cid:239)u(cid:285)a i zawiera ju(cid:285) takie pozycje jak BBC, eBay czy LinkedIn. Nietrudno si(cid:218) domy(cid:258)li(cid:202), (cid:285)e je(cid:258)li tak du(cid:285)e jednostki przechodz(cid:200) z CSS na Sass, to musi im si(cid:218) to naprawd(cid:218) op(cid:239)aci(cid:202). Istotnie tak jest! A zatem teraz przyjrzymy si(cid:218) kilku flagowym elementom j(cid:218)zyka Sass. Nie b(cid:218)dzie to wyczerpuj(cid:200)cy opis mo(cid:285)liwo(cid:258)ci tej technologii, a jedynie przedsmak tego, jak bardzo Sass i Compass mog(cid:200) u(cid:239)atwi(cid:202) Ci prac(cid:218) z kaskadowymi arkuszami stylów. Zmienne (aby warto(cid:258)ci definiowa(cid:202) tylko raz) Ile razy podczas pracy nad stron(cid:200) internetow(cid:200) deklarujesz warto(cid:258)ci ró(cid:285)nych kolorów w CSS? Najcz(cid:218)(cid:258)ciej u(cid:285)ywa si(cid:218) do tego notacji szesnastkowej typu #bfbfbf. Robisz to dziesi(cid:218)(cid:202) razy? 23 Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów Dwadzie(cid:258)cia? Ile by nie by(cid:239)o, cz(cid:218)sto staram si(cid:218) zapami(cid:218)ta(cid:202) te szesnastkowe warto(cid:258)ci, zw(cid:239)aszcza je(cid:258)li w serwisie u(cid:285)ywam dwóch, trzech kolorów. Jednak w Sass mo(cid:285)na zdefiniowa(cid:202) kolory jako zmienne. Zmienna to tylko odno(cid:258)nik do warto(cid:258)ci. Spójrz na poni(cid:285)sze trzy definicje zmiennych: $red: #ff0b13; $blue: #091fff; $green: #11c909; Sk(cid:239)adnia zmiennych W Sass znak dolara sygnalizuje pocz(cid:200)tek definicji zmiennej. Za nim powinna znajdowa(cid:202) si(cid:218) nazwa (mi(cid:218)dzy znakiem dolara a nazw(cid:200) nie mo(cid:285)e by(cid:202) spacji). Pó(cid:283)niej wpisuje si(cid:218) dwukropek sygnalizuj(cid:200)cy, (cid:285)e zaraz pojawi si(cid:218) warto(cid:258)(cid:202), po której b(cid:218)dzie znajdowa(cid:202) si(cid:218) (cid:258)rednik oznaczaj(cid:200)cy zamkni(cid:218)cie definicji tej zmiennej. W przedstawionym przyk(cid:239)adzie w zmiennej $green zapi- sana zosta(cid:239)a szesnastkowa warto(cid:258)(cid:202) koloru zielonego. Tak zdefiniowanych zmiennych mo(cid:285)na u(cid:285)y- wa(cid:202) w arkuszu Sass w nast(cid:218)puj(cid:200)cy sposób: .i-want-to-be-green { color: $green; } A to jest kod CSS, który powstanie w wyniku kompilacji powy(cid:285)szej konstrukcji: .i-want-to-be-green { color: #11c909; } W odniesieniu do Sass s(cid:239)owo „kompilacja” oznacza konwersj(cid:218) z Sass na CSS. Okre(cid:258)lenie to jest cz(cid:218)sto u(cid:285)ywane w ró(cid:285)nych poradnikach i dyskusjach dotycz(cid:200)cych Sass, wi(cid:218)c warto pami(cid:218)ta(cid:202), (cid:285)e oznacza one jedynie zamian(cid:218) kodu Sass (znajduj(cid:200)cego si(cid:218) w pliku .scss lub .sass — o czym za chwil(cid:218)) na CSS. Proste, prawda? O wiele (cid:239)atwiej jest zapami(cid:218)ta(cid:202) nazwy samodzielnie zdefiniowanych zmiennych ni(cid:285) nienatu- ralne warto(cid:258)ci szesnastkowe. Ponadto je(cid:258)li kiedy(cid:258) zechcesz zmieni(cid:202) te kolory, wystarczy przypi- sa(cid:202) now(cid:200) warto(cid:258)(cid:202) zmiennej, a reszta zmieni si(cid:218) automatycznie. Mo(cid:285)esz po(cid:285)egna(cid:202) w swoim edyto- rze star(cid:200) funkcj(cid:218) znajdowania i zamiany tekstu. Uff! Automatyczne kolory w formacie RGBA i konwersje Coraz wi(cid:218)cej przegl(cid:200)darek obs(cid:239)uguje formaty zapisu kolorów RGBA (Red, Green, Blue, Alpha) i HSLA (Hue, Saturation, Lightness, Alpha). Cz(cid:218)sto stosowan(cid:200) sztuczk(cid:200) asekuracyjn(cid:200), na wy- padek gdyby kto(cid:258) jeszcze do przegl(cid:200)dania naszych stron u(cid:285)y(cid:239) przestarza(cid:239)ej przegl(cid:200)darki, jest wpisanie najpierw warto(cid:258)ci w formacie szesnastkowym, a nast(cid:218)pnie jej ekwiwalentu w formacie RGBA lub HSLA rozpoznawanego przez nowe przegl(cid:200)darki (dzi(cid:218)ki temu nowe aplikacje 24 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Sass i Compass dla pocz(cid:261)tkuj(cid:261)cych wykorzystuj(cid:200) formaty RGBA i HSLA, a stare — format szesnastkowy). Na przyk(cid:239)ad je(cid:258)li chcieliby(cid:258)my zdefiniowa(cid:202) kolor o pewnym stopniu przezroczysto(cid:258)ci, mogliby(cid:258)my napisa(cid:202) tak(cid:200) regu(cid:239)(cid:218) CSS: .color-me-bad { color: #11c909; color: rgba(17, 201, 9, 0.9); } Czasami pobieranie kolorów w formatach szesnastkowym i RGBA ze z(cid:239)o(cid:285)onych obrazów (w apli- kacjach typu Photoshop, Fireworks itp.) jest utrudnione. Kiedy(cid:258) u(cid:285)ywa(cid:239)em male(cid:241)kiego pro- gramu s(cid:239)u(cid:285)(cid:200)cego tylko do sprawdzania warto(cid:258)ci kolorów. Jednak od kiedy u(cid:285)ywam Sass, wspo- mniana aplikacja sta(cid:239)a si(cid:218) niepotrzebna, poniewa(cid:285) mog(cid:218) pisa(cid:202) takie deklaracje: .color-me-good { color: $green; color: rgba($green, 0.9); } W kodzie tym u(cid:285)y(cid:239)em (cid:239)atwej do zapami(cid:218)tania nazwy zmiennej reprezentuj(cid:200)cej kolor i funkcji kolorowej Sass w celu przekonwertowania tego koloru na format RGBA. W trzeciej linijce tego kodu prosz(cid:218) Sass o przekazanie warto(cid:258)ci koloru (zdefiniowanego w postaci zmiennej $green) jako warto(cid:258)ci RGBA z kana(cid:239)em alfa o warto(cid:258)ci 0.9. W wyniku kompilacji powstanie nast(cid:218)puj(cid:200)cy kod CSS: .color-me-good { color: #11c909; color: rgba(17, 201, 9, 0.9); } Tym, którzy do tej pory jeszcze si(cid:218) odpowiednio nie skoncentrowali, wyja(cid:258)niam, (cid:285)e Sass au- tomatycznie dostarczy(cid:239) kolor w formacie RGBA. Kana(cid:239) alfa zosta(cid:239) ustawiony na 90 procent. To oznacza, (cid:285)e w nowoczesnych przegl(cid:200)darkach przez kolorow(cid:200) powierzchni(cid:218) b(cid:218)dzie wida(cid:202) 10 procent tego, co si(cid:218) pod ni(cid:200) znajduje. Zapomnij o przedrostkach producentów Jestem wielbicielem technologii CSS3, poniewa(cid:285) umo(cid:285)liwia pozbycie si(cid:218) wielu obrazów i ogólnie stwarza bardzo du(cid:285)e mo(cid:285)liwo(cid:258)ci. Jednak korzystanie z nowych funkcji (gradientów t(cid:239)a, cieni elementów, przekszta(cid:239)ce(cid:241) itd.), które wci(cid:200)(cid:285) s(cid:200) w fazie eksperymentalnej, wymaga stosowa- nia przedrostków producentów i czasami zró(cid:285)nicowanej sk(cid:239)adni. Wiesz, o co chodzi. W ramach przyk(cid:239)adu spójrz na poni(cid:285)sz(cid:200), ju(cid:285) przestarza(cid:239)(cid:200), regu(cid:239)(cid:218) CSS zaokr(cid:200)glaj(cid:200)c(cid:200) rogi: .rounded { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; 25 Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów border-radius: 4px; } Wraz z towarzysz(cid:200)cym Sass systemem Compass otrzymujemy do dyspozycji mnóstwo darmo- wych domieszek (na razie nie musisz wiedzie(cid:202), czym dok(cid:239)adnie one s(cid:200), wkrótce to wyja(cid:258)ni(cid:218)). Dzi(cid:218)ki temu zamiast zapami(cid:218)tywa(cid:202) wszystkie przedrostki i odmiany sk(cid:239)adni, wystarczy napisa(cid:202) taki prosty kod: .rounded { @include border-radius(4px); } Po kompilacji tego kodu powsta(cid:239)by dok(cid:239)adnie taki sam arkusz CSS jak przedstawiony powy(cid:285)ej. Wszystkie przedrostki producentów zosta(cid:239)yby dodane automatycznie. Jest to wielka oszcz(cid:218)d- no(cid:258)(cid:202) czasu. Zagnie(cid:285)d(cid:285)anie regu(cid:239) W Sass mo(cid:285)na zagnie(cid:285)d(cid:285)a(cid:202) regu(cid:239)y. Je(cid:258)li na przyk(cid:239)ad chcesz utworzy(cid:202) zestaw odno(cid:258)ników w ele- mencie nav i doda(cid:202) alternatywne pseudoklasy :hover i :active, mo(cid:285)esz napisa(cid:202) taki arkusz Sass: nav { a { color: $red; :hover { color: $green; } :visited { color: $blue; } } } W regule elementu nav zagnie(cid:283)dzili(cid:258)my regu(cid:239)(cid:218) przeznaczon(cid:200) dla elementów odno(cid:258)ników a, w któ- rej z kolei zagnie(cid:283)dzili(cid:258)my regu(cid:239)y dotycz(cid:200)ce formatowania stanów :hover i :visited tych odno- (cid:258)ników. To wygl(cid:200)da na bardziej skomplikowane, ni(cid:285) jest w rzeczywisto(cid:258)ci. Po kompilacji kod ten przybierze nast(cid:218)puj(cid:200)c(cid:200) posta(cid:202): nav a { color: #ff0b13; } nav a:hover { color: #11c909; } nav a:visited { color: #091fff; } 26 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Sass i Compass dla pocz(cid:261)tkuj(cid:261)cych Lubi(cid:218) wykonywa(cid:202) taki zabieg na niewielkich samodzielnych modu(cid:239)ach CSS, poniewa(cid:285) po- zwala mi to zachowa(cid:202) wszystkie powi(cid:200)zane ze sob(cid:200) style razem, zw(cid:239)aszcza gdy potrzebne s(cid:200) pseudoklasy (na przyk(cid:239)ad :hover czy :active). Pami(cid:218)taj, (cid:285)e tworzenie bardzo konkretnych selektorów CSS ma(cid:239)o kiedy jest dobrym pomys(cid:239)em. Na przyk(cid:239)ad poni(cid:285)ej znajduje si(cid:218) regu(cid:239)a CSS z rodzaju tych, które potrafi(cid:200) uprzykrzy(cid:202) cz(cid:239)owiekowi (cid:285)ycie: #container .callout-area ul#callout-one li.callout-list a.callout-link { color: #bfbfbf; } Selektor si(cid:218)ga bardzo g(cid:239)(cid:218)boko w struktur(cid:218) dokumentu, przez co jest bardzo konkretny. Z punktu widzenia (cid:239)atwo(cid:258)ci obs(cid:239)ugi kodu o wiele lepszym rozwi(cid:200)zaniem jest taki selektor: callout-link { color: #bfbfbf; } Pami(cid:218)taj wi(cid:218)c, (cid:285)e istnienie mo(cid:285)liwo(cid:258)ci zagnie(cid:285)d(cid:285)ania regu(cid:239) wcale nie oznacza, (cid:285)e nale(cid:285)y z niej ci(cid:200)gle korzysta(cid:202). Prostsze zapytania medialne Je(cid:258)li nie ma jakiego(cid:258) wa(cid:285)nego powodu, aby zrobi(cid:202) inaczej, moim zdaniem wszystkie strony internetowe powinny by(cid:202) responsywne (ekhm, mo(cid:285)esz kupi(cid:202) moj(cid:200) ksi(cid:200)(cid:285)k(cid:218) Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3). W odniesieniu do CSS oznacza to konieczno(cid:258)(cid:202) napisania wielu zapyta(cid:241) medialnych dla ró(cid:285)nych punktów granicznych w projekcie. Na przyk(cid:239)ad aby zmieni(cid:202) typografi(cid:218), je(cid:258)li strona jest przegl(cid:200)dana na urz(cid:200)dzeniu o okre(cid:258)lonej szeroko(cid:258)ci ekranu, mo(cid:285)na napisa(cid:202) taki kod CSS: @media only screen and (min-width: 280px) and (max-width: 479px) { .h1 { font-size: 1.1em; } } @media only screen and (min-width: 480px) and (max-width: 599px) { .h1 { font-size: 1em; } } @media only screen and (min-width: 600px) and (max-width: 767px) { .h1 { font-size: 0.9em; } } 27 Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów W arkuszu tym ustawiono ró(cid:285)ne rozmiary tekstu w elementach h1 w zale(cid:285)no(cid:258)ci od szeroko(cid:258)ci ekranu w pikselach. Osobi(cid:258)cie uwa(cid:285)am, (cid:285)e kod ten jest zbyt obszerny i zmusza do zapami(cid:218)tania wielu rzeczy. Natomiast w Sass wystarczy napisa(cid:202) tylko tyle: h1 { @include MQ(XS) { font-size: 1.1em; } @include MQ(S) { font-size: 1em; } @include MQ(M) { font-size: 0.9em; } } Zmienne dla XS, S i M s(cid:200) zdefiniowane gdzie(cid:258) indziej (ka(cid:285)da reprezentuje pewn(cid:200) szeroko(cid:258)(cid:202)). W domieszce MQ nazwy zmiennych s(cid:200) zast(cid:218)powane ich warto(cid:258)ciami. Za pomoc(cid:200) domieszki MQ mo(cid:285)na wstawi(cid:202) zapytania medialne, gdzie si(cid:218) chce. W ten sposób kod powinien sta(cid:202) si(cid:218) bardziej czytelny. Automatyczna kompresja kodu CSS i przyspieszenie dzia(cid:239)ania strony Opisa(cid:239)em ju(cid:285) kilka elementów Sass i Compass, które powinny Ci(cid:218) przekona(cid:202) do zaintereso- wania si(cid:218) tymi technologiami, a przecie(cid:285) jeszcze nawet nie wspomnia(cid:239)em o @extend, stylach zast(cid:218)pczych, plikach cz(cid:218)(cid:258)ciowych czy duszkach graficznych. Licz(cid:218), (cid:285)e przeczytasz dalsze roz- dzia(cid:239)y, w których obja(cid:258)niam tak(cid:285)e te sk(cid:239)adniki. Tymczasem, jak to zwykli mawia(cid:202) Columbo i Steve Jobs: „I jeszcze jedno…”. Jak kompresujesz kod CSS przed wprowadzeniem go do u(cid:285)ytku? Kompresja znacznie zmniejsza pliki CSS, dzi(cid:218)ki czemu dzia(cid:239)aj(cid:200) one szybciej we wszystkich pobieraj(cid:200)cych je urz(cid:200)dzeniach. (cid:146)atwo zredukowa(cid:202) rozmiar plików o po(cid:239)ow(cid:218). Oczywi(cid:258)cie zawsze mo(cid:285)na skopiowa(cid:202) ca(cid:239)y arkusz stylów do jakiego(cid:258) internetowego kompresora albo skorzysta(cid:202) z odpowiedniej opcji w edytorze, ale Sass i tak robi to lepiej. Po prostu to robi. W Sass mo(cid:285)na wybra(cid:202) kilka formatów kompilacji kodu do postaci CSS, z których jeden to format skompresowany. Gdy tylko zapiszesz plik Sass, zostaje on automatycznie skompilowany na skompresowan(cid:200) posta(cid:202) CSS, gotow(cid:200) do produkcji najmniejsz(cid:200) mo(cid:285)liw(cid:200) wersj(cid:218). Jest to ogromna oszcz(cid:218)dno(cid:258)(cid:202) czasu i wielka korzy(cid:258)(cid:202) dla wszystkich u(cid:285)ytkowników Twojej strony in- ternetowej, nawet je(cid:258)li nie zdaj(cid:200) sobie z tego sprawy. To tyle. Przedstawi(cid:239)em kilka zalet i mo(cid:285)liwo(cid:258)ci stwarzanych przez tandem Sass i Compass. Teraz wyja(cid:258)ni(cid:218), czym dok(cid:239)adnie s(cid:200) Sass i Compass, a potem poka(cid:285)(cid:218) Ci, jak zacz(cid:200)(cid:202) z nimi pracowa(cid:202). 28 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Sass i Compass dla pocz(cid:261)tkuj(cid:261)cych Czym jest Sass Na stronie internetowej Sass (http://sass-lang.com/) znajdujemy nast(cid:218)puj(cid:200)cy opis tego j(cid:218)zyka: Sass to strukturalny metaj(cid:218)zyk odnosz(cid:200)cy si(cid:218) do CSS, s(cid:239)u(cid:285)(cid:200)cy do tworzenia klarownych opisów stylu dokumentów oraz posiadaj(cid:200)cy szersze mo(cid:285)liwo(cid:258)ci ni(cid:285) czysty CSS. Sass ma prostsz(cid:200) i elegantsz(cid:200) sk(cid:239)adni(cid:218) ni(cid:285) CSS oraz zawiera wiele funkcji przydatnych przy tworzeniu i obs(cid:239)udze arkuszy stylów. Ponadto na stronie internetowej Sass mo(cid:285)na znale(cid:283)(cid:202) informacje na temat pochodzenia tego j(cid:218)zyka. Jego twórc(cid:200) jest Hampton Catlin (ten sam, który stworzy(cid:239) te(cid:285) HAML). Od momentu powstania w 2006 roku Sass by(cid:239) promowany, uwielbiany i obs(cid:239)ugiwany przez wiele innych osób. Jednak najwi(cid:218)ksze zas(cid:239)ugi dla jego rozwoju maj(cid:200) Nathan Weizenbaum (projektant i pro- gramista, który wspó(cid:239)pracowa(cid:239) z Hamptonem Catlinem do wersji 2) i Christopher Eppstein (który do(cid:239)(cid:200)czy(cid:239) do zespo(cid:239)u w 2008 roku i by(cid:239) w nim obecny od wersji 2.2; ponadto Eppstein jest twórc(cid:200) systemu Compass). Przy rozwijaniu projektu pomaga(cid:239)o tak(cid:285)e wielu wolontariuszy. Strona projektu w serwisie GitHub znajduje si(cid:218) pod adresem http://github.com/nex3/sass. Jako (cid:285)e pocz(cid:200)tki Sass (cid:258)ci(cid:258)le si(cid:218) wi(cid:200)(cid:285)(cid:200) ze spo(cid:239)eczno(cid:258)ci(cid:200) skupion(cid:200) wokó(cid:239) j(cid:218)zyka Ruby (Ruby jest j(cid:218)zykiem programowania), jego dokumentacja zosta(cid:239)a napisana j(cid:218)zykiem zrozumia(cid:239)ym dla pro- gramistów. Z tego powodu by(cid:239)a ona trudna do zrozumienia dla osób niezwi(cid:200)zanych z progra- mowaniem jako takim. To wielka szkoda, poniewa(cid:285) projektanci samodzielnie pisz(cid:200)cy kod dla swoich produktów skorzystaliby z udogodnie(cid:241) technologii Sass tak samo jak wszyscy inni. J(cid:218)zyk Sass ma dwa rodzaje sk(cid:239)adni. Pierwotna (zwana Sass i wykorzystuj(cid:200)ca pliki z rozszerzeniem .sass) jest zwi(cid:218)z(cid:239)a i bazuje na wci(cid:218)ciach. Brak w niej wszechobecnych w CSS klamer. Jej szczegó(cid:239)owy opis mo(cid:285)na znale(cid:283)(cid:202) na stronie http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html. Natomiast w tej ksi(cid:200)(cid:285)ce opisuj(cid:218) sk(cid:239)adni(cid:218) SCSS, której kod zapisuje si(cid:218) w plikach z rozszerzeniem .scss. Sk(cid:239)ad- nia ta jest bardziej obszerna ni(cid:285) jej poprzedniczka, ale te(cid:285) bardziej przypomina normalne arkusze stylów. Wynn Netherland, Nathan Weizenbaum i Christopher Eppstein napisali w(cid:239)asn(cid:200) ksi(cid:200)(cid:285)k(cid:218) o Sass i Compass — Sass and Compass in Action. Jako (cid:285)e Nathan Weizenbaum i Christopher Eppstein nadal s(cid:200) zarz(cid:200)dcami projektu Sass, to ksi(cid:200)(cid:285)ka ta, mimo (cid:285)e nie jest przeznaczona wprost dla projektantów, mo(cid:285)e by(cid:202) godna uwagi. Zajrzyj na stron(cid:218) http://manning.com/netherland/. J(cid:218)zyka Sass mo(cid:285)na u(cid:285)ywa(cid:202) za darmo, bez posiadania jakiejkolwiek licencji. Czym jest Compass Na stronie Compass pod adresem http://compass-style.org znajduje si(cid:218) nast(cid:218)puj(cid:200)ca informacja: Compass to otwarte narz(cid:218)dzie do tworzenia kaskadowych arkuszy stylów. 29 Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów W istocie Compass by(cid:239) pierwszym narz(cid:218)dziem obs(cid:239)uguj(cid:200)cym Sass. Instaluj(cid:200)c go wraz z Sass, zaopatrujemy si(cid:218) w mnóstwo przydatnych wzorców i dodatków u(cid:239)atwiaj(cid:200)cych tworzenie kodu CSS. Widzia(cid:239)e(cid:258) telewizyjny program „Odpicuj mi bryk(cid:218)”? Gdyby Xzibit zabra(cid:239) Sass do West Coast Customs, to Compass by(cid:239)by pierwszym zamontowanym dodatkiem! Innymi s(cid:239)owy, Compass umo(cid:285)liwia korzystanie z nowych w(cid:239)asno(cid:258)ci CSS3, takich jak cienie elementów, gradienty, kolumny i przekszta(cid:239)cenia, za pomoc(cid:200) pojedynczych polece(cid:241), które na- st(cid:218)pnie magicznie zamienia na dzia(cid:239)aj(cid:200)cy bezproblemowo, zgodny ze wszystkimi przegl(cid:200)darkami kod CSS. Ponadto pozwala na stosowanie dodatkowych wtyczek umo(cid:285)liwiaj(cid:200)cych tworzenie niesamowitych lekkich systemów siatkowych, o których b(cid:218)dzie jeszcze mowa w dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki. Strona projektu Compass w serwisie GitHub znajduje si(cid:218) pod adresem https://github.com/ chriseppstein/compass. Compass to program typu charityware, co oznacza, (cid:285)e mo(cid:285)na z niego korzysta(cid:202) do woli, ale jego w(cid:239)a(cid:258)ci- ciele zach(cid:218)caj(cid:200) do wp(cid:239)acania darowizn na rzecz fundacji UMDF pomagaj(cid:200)cej w poszukiwaniu lekarstwa na choroby mitochondrialne. Gdy zatem zainstalujesz Compass i zorientujesz si(cid:218), ile czasu dzi(cid:218)ki niemu oszcz(cid:218)dzasz, rozwa(cid:285) mo(cid:285)liwo(cid:258)(cid:202) wp(cid:239)aty dowolnej darowizny (potrzebne informacje znajdziesz pod adresem http://umdf.org/compass). Instalacja Sass i Compass W czasach s(cid:239)usznie minionych Sass i Compass mo(cid:285)na by(cid:239)o zainstalowa(cid:202) tylko przy u(cid:285)yciu wiersza polece(cid:241). Na szcz(cid:218)(cid:258)cie jednak czasy si(cid:218) zmieni(cid:239)y. Je(cid:258)li nie jeste(cid:258) fanem wiersza polece(cid:241), to nie musisz z niego korzysta(cid:202). Istnieje kilka graficznych narz(cid:218)dzi dla systemów OS X, Linux i Windows, które tak(cid:285)e zawieraj(cid:200) wszystkie pliki potrzebne do kompilowania plików Sass na CSS podczas ich zapisywania. Opisz(cid:218) je nieco dalej, ale najpierw poka(cid:285)(cid:218), jak zainstalowa(cid:202) Sass i Compass za pomoc(cid:200) wiersza polece(cid:241). Jeste(cid:258) gotów? Do dzie(cid:239)a. Rozumiem, je(cid:258)li Ciebie to nie bawi. W takim razie mo(cid:285)esz przej(cid:258)(cid:202) od razu do sekcji po(cid:258)wi(cid:218)- conej narz(cid:218)dziom graficznym. Zawsze mo(cid:285)esz tu wróci(cid:202) kiedy indziej. Nikogo nie oceniam! Instalacja pakietu dla systemu OS X U(cid:285)ytkownicy systemu Mac OS X maj(cid:200) u(cid:239)atwione zadanie, poniewa(cid:285) twórca programu Compass Chris Eppstein stworzy(cid:239) graficzny pakiet instalacyjny. Wystarczy pobra(cid:202) ten pakiet ze strony https://github.com/chriseppstein/compass/downloads i uruchomi(cid:202) go na swoim komputerze. Jednak warto te(cid:285) wiedzie(cid:202) co nieco o sposobie dzia(cid:239)ania wiersza polece(cid:241), wi(cid:218)c mo(cid:285)esz te(cid:285) spróbowa(cid:202) podnie(cid:258)(cid:202) troch(cid:218) swoje kwalifikacje i skorzysta(cid:202) z tego narz(cid:218)dzia. 30 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Sass i Compass dla pocz(cid:261)tkuj(cid:261)cych Praca w wierszu polece(cid:241) Aby pracowa(cid:202) z Sass i Compass w wierszu polece(cid:241), nale(cid:285)y zna(cid:202) tylko kilka polece(cid:241). Oto lista tych, które prawie na pewno Ci si(cid:218) przydadz(cid:200): Wy(cid:258)wietlanie listy plików w bie(cid:285)(cid:200)cym folderze: Windows: dir Mac: ls Zmiana folderu — przej(cid:258)cie do innego folderu znajduj(cid:200)cego si(cid:218) w bie(cid:285)(cid:200)cym: Windows i Mac: cd nazwa-folderu W miejsce napisu nazwa-folderu nale(cid:285)y wpisa(cid:202) w(cid:239)a(cid:258)ciw(cid:200) nazw(cid:218) folderu. Aby przej(cid:258)(cid:202) do folderu nadrz(cid:218)dnego: Windows: cd.. Mac cd .. Instalacja Sass i Compass i praca z nimi w wierszu polece(cid:241) Do instalacji Sass i Compass potrzebny jest interpreter j(cid:218)zyka Ruby. Je(cid:258)li u(cid:285)ywasz systemu OS X, to interpreter ten jest ju(cid:285) gotowy do u(cid:285)ycia. Instalacja interpretera Ruby w systemie Windows Je(cid:258)li korzystasz z systemu Windows, wejd(cid:283) na stron(cid:218) http://rubyinstaller.org/downloads/ oraz po- bierz najnowszy plik instalacyjny interpretera j(cid:218)zyka Ruby (odno(cid:258)nik do tego pliku b(cid:218)dzie wygl(cid:200)da(cid:239) mniej wi(cid:218)cej tak: http://rubyforge.org/frs/download.php/76054/rubyinstaller-1.9.3-p194.exe, cho(cid:202) mo(cid:285)e zawiera(cid:202) inny numer wersji). Podczas instalacji pozostaw ustawienia domy(cid:258)lne (nie musisz zaznacza(cid:202) (cid:285)adnych pól wyboru w opcjach). W systemie Linux interpreter Ruby powinno da(cid:202) si(cid:218) zainstalowa(cid:202) bezpo(cid:258)rednio za pomoc(cid:200) mened(cid:285)era pakietów. Zak(cid:239)adam, (cid:285)e je(cid:258)li kto(cid:258) u(cid:285)ywa systemu Linux, to do(cid:258)(cid:202) sprawnie pos(cid:239)uguje si(cid:218) wierszem polece(cid:241). Je(cid:258)li nie, to zalecam przesi(cid:200)(cid:258)(cid:202) si(cid:218) na Maca. 31 Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów Polecenie gem Niezale(cid:285)nie od tego, jakiego systemu operacyjnego u(cid:285)ywasz (Windows, Linux lub Mac), masz ju(cid:285) w nim przygotowany do dzia(cid:239)ania interpreter j(cid:218)zyka Ruby. Teraz skorzystamy z polecenia gem, którego wykonanie b(cid:218)dzie równoznaczne z wydaniem komputerowi nast(cid:218)puj(cid:200)cego pole- cenia: „Ruby, zainstaluj mi gem o nazwie compass”. Jako (cid:285)e Compass wymaga Sass, instalacja tego pierwszego poci(cid:200)ga za sob(cid:200) automatyczn(cid:200) instalacj(cid:218) drugiego. Traktuj polecenie gem jak niewielki program albo wtyczk(cid:218). Jest to po prostu rozszerzenie funkcjonalno(cid:258)ci narz(cid:218)dzia korzystaj(cid:200)cego z interpretera Ruby. Jako (cid:285)e Sass i Compass wykorzystuj(cid:200) Ruby, gdy zaczniesz na dobre korzysta(cid:202) z Sass, cz(cid:218)sto b(cid:218)dziesz pobiera(cid:202) nowe „klejnoty” (gem oznacza „klejnot”). Istniej(cid:200) na przyk(cid:239)ad gemy dla systemów siatkowych, jak Susy, gemy dla stylów przycisków, jak Sassy Buttons, i wiele wi(cid:218)cej. Instalacja z wiersza polece(cid:241) w systemie Mac OS X W systemie OS X nale(cid:285)y uruchomi(cid:202) aplikacj(cid:218) o nazwie Terminal, któr(cid:200) zazwyczaj mo(cid:285)na znale(cid:283)(cid:202) w folderze Aplikacje/Narz(cid:218)dzia. Mo(cid:285)e to wygl(cid:200)da(cid:202) tak: 32 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Sass i Compass dla pocz(cid:261)tkuj(cid:261)cych Kliknij dwukrotnie ten plik, aby wy(cid:258)wietli(cid:202) okno widoczne poni(cid:285)ej: Je(cid:258)li nigdy nie korzysta(cid:239)e(cid:258) z tego narz(cid:218)dzia, to podpowiem, (cid:285)e jest to w(cid:239)a(cid:258)nie wiersz polece(cid:241)! Teraz tylko wpisz poni(cid:285)sze polecenie i naci(cid:258)nij klawisz Enter: sudo gem install compass Zostaniesz poproszony o podanie has(cid:239)a (nale(cid:285)y wpisa(cid:202) to samo, którego u(cid:285)ywasz do logowania do pulpitu). Wpisz je i naci(cid:258)nij klawisz Enter. Podczas wpisywania has(cid:239)a nie przestrasz si(cid:218), (cid:285)e nic si(cid:218) nie dzieje. Terminal nie reaguje w widoczny sposób, gdy wpisuje si(cid:218) has(cid:239)o. Jednak po naci(cid:258)ni(cid:218)ciu klawisza Enter Sass i Compass zostan(cid:200) zainstalowane. I jak si(cid:218) czujesz? W(cid:239)a(cid:258)nie zainstalowa(cid:239)e(cid:258) gem Ruby. Czujesz si(cid:218) jak maniak komputerowy? Nie przejmuj si(cid:218). To b(cid:218)dzie nasza ma(cid:239)a tajemnica. Instalacja z wiersza polece(cid:241) w systemie Windows W systemie Windows Vista i 7 nale(cid:285)y klikn(cid:200)(cid:202) przycisk z logo Microsoftu, wpisa(cid:202) s(cid:239)owo ruby w polu wyszukiwania i klikn(cid:200)(cid:202) na li(cid:258)cie pozycj(cid:218) Start Command Prompt with Ruby (uruchom wiersz polece(cid:241) z obs(cid:239)ug(cid:200) j(cid:218)zyka Ruby). W systemie Windows 8 nale(cid:285)y klikn(cid:200)(cid:202) prawym przyciskiem myszy na ekranie startowym, klikn(cid:200)(cid:202) opcj(cid:218) Wszystkie aplikacje, a nast(cid:218)pnie klikn(cid:200)(cid:202) opcj(cid:218) Start Command Prompt with Ruby. 33 Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów Zostanie wy(cid:258)wietlone okno dialogowe wiersza polece(cid:241) podobne do pokazanego poni(cid:285)ej: Wpisz poni(cid:285)sze polecenie i naci(cid:258)nij klawisz Enter: gem install compass Spowoduje to zainstalowanie Compass i Sass. Po instalacji pojawi si(cid:218) nowy wiersz polece(cid:241) z migaj(cid:200)cym kursorem. To wszystko. Sass i Compass s(cid:200) zainstalowane i mo(cid:285)esz zacz(cid:200)(cid:202) tworzy(cid:202) pliki. 34 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Sass i Compass dla pocz(cid:261)tkuj(cid:261)cych Sprawdzanie wersji Compass i Sass Jako (cid:285)e od czasu do czasu Sass i Compass s(cid:200) wzbogacane o nowe funkcje, dobrze jest wie- dzie(cid:202), jak si(cid:218) sprawdza bie(cid:285)(cid:200)c(cid:200) i instaluje najnowsz(cid:200) wersj(cid:218) tych narz(cid:218)dzi. Do sprawdzania wersji w wierszu polece(cid:241) s(cid:239)u(cid:285)y poni(cid:285)sze polecenie: sass –v W odpowiedzi otrzymasz napis w stylu Sass 3.4.15 (Selective Steve). Aby sprawdzi(cid:202) wersj(cid:218) narz(cid:218)dzia Compass, nale(cid:285)y wykona(cid:202) poni(cid:285)sze polecenie: compass –v W odpowiedzi otrzymasz napis w stylu Compass 1.0.3 (Polaris). Je(cid:258)li Ci(cid:218) to interesuje, Polaris to Gwiazda Polarna (tak, sprawdzi(cid:239)em to w Google). Sprawdzanie, które wersje Sass i Compass s(cid:200) dost(cid:218)pne Oczywi(cid:258)cie zawsze mo(cid:285)na wej(cid:258)(cid:202) na strony tych narz(cid:218)dzi i sprawdzi(cid:202) na nich, jakie wersje s(cid:200) dost(cid:218)pne, ale (cid:239)atwiej i szybciej jest skorzysta(cid:202) w tym celu z wiersza polece(cid:241). Wystarczy wy- kona(cid:202) poni(cid:285)sze polecenie: gem list sass -a -r W ten sposób prosimy interpreter j(cid:218)zyka Ruby o podanie listy wersji wszystkich gemów ze s(cid:239)owem sass w nazwie. Cz(cid:218)(cid:258)(cid:202) -r oznacza, (cid:285)e prosimy o zasi(cid:218)gni(cid:218)cie informacji zdalnych (na przyk(cid:239)ad z internetu, a nie z systemu operacyjnego), natomiast parametr -a nakazuje wy- (cid:258)wietli(cid:202) list(cid:218) wszystkich wersji. Poni(cid:285)ej znajduje si(cid:218) to samo polecenie w wersji dla Compass: gem list compass -a -r Ka(cid:285)de z tych polece(cid:241) spowoduje zwrócenie listy gemów zawieraj(cid:200)cych w nazwie s(cid:239)owo sass lub compass z podaniem numeru wersji w nawiasie. Na przyk(cid:239)ad: sass (3.4.15, 3.4.14, 3.4.13, 3.4.12, 3.4.11, 3.4.10, 3.4.9, 3.4.8, 3.4.7, 3.4.6, 3.4.5, 3.4.4, 3.4.3, 3.4.2, 3.4.1, 3.4.0, 3.3.14, 3.3.13, 3.3.12, 3.3.11, 3.3.10, 3.3.9, 3.3.8, 3.3.7, 3.3.6, 3.3.5, 3.3.4, 3.3.3, 3.3.2, 3.3.1, 3.3.0, 3.2.19, 3.2.18, 3.2.17, 3.2.16, 3.2.15, 3.2.14, 3.2.13, 3.2.12, 3.2.11, 3.2.10, 3.2.9, 3.2.8, 3.2.7, 3.2.6, 3.2.5, 3.2.4, 3.2.3, 3.2.2, 3.2.1, 3.2.0, 3.1.21, 3.1.20, 3.1.19, 3.1.18, 3.1.17, 3.1.16, 3.1.15, 3.1.14, 3.1.13, 3.1.12, 3.1.11, 3.1.10, 3.1.9, 3.1.8, 3.1.7, 3.1.6, 3.1.5, 3.1.4, 3.1.3, 3.1.2, 3.1.1, 3.1.0) Wersje s(cid:200) wymienione w odwrotnej kolejno(cid:258)ci chronologicznej (od najnowszej). 35 Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów Aby sprawdzi(cid:202), jakie wersje Sass s(cid:200) przygotowywane do opublikowania, nale(cid:285)y u(cid:285)y(cid:202) poni(cid:285)- szego polecenia: gem list sass --pre -r Aby sprawdzi(cid:202), jakie wersje narz(cid:218)dzia Compass s(cid:200) przygotowywane do opublikowania, nale(cid:285)y u(cid:285)y(cid:202) poni(cid:285)szego polecenia: gem list compass --pre -r Instalowanie najnowszej wersji Sass i Compass (w(cid:239)(cid:200)cznie z wydaniami wst(cid:218)pnymi) Aby zainstalowa(cid:202) najnowsz(cid:200) stabiln(cid:200) wersj(cid:218) Sass, wystarczy wykona(cid:202) w wierszu polece(cid:241) po- ni(cid:285)sze polecenie (s(cid:239)owo sudo w niektórych systemach jest niepotrzebne): sudo gem install sass Je(cid:258)li przysz(cid:239)a wersja ma jakie(cid:258) niezwykle przydatne sk(cid:239)adniki, które koniecznie chcesz wy- próbowa(cid:202), ale jeszcze oficjalnie nie zosta(cid:239)a wydana, za pomoc(cid:200) poni(cid:285)szego polecenia mo(cid:285)esz zainstalowa(cid:202) najnowsz(cid:200) wersj(cid:218) wst(cid:218)pn(cid:200): sudo gem install sass --pre Miej jednak (cid:258)wiadomo(cid:258)(cid:202), (cid:285)e w takiej wersji mog(cid:200) znajdowa(cid:202) si(cid:218) b(cid:239)(cid:218)dy i ró(cid:285)ne usterki. Dlate- go je(cid:285)eli nie masz bardzo wa(cid:285)nego powodu, by zrobi(cid:202) inaczej, zalecam u(cid:285)ywanie wy(cid:239)(cid:200)cznie stabilnych wersji oprogramowania. Dla Compass polecenia wygl(cid:200)daj(cid:200) bardzo podobnie: sudo gem install compass I polecenie dla wersji wst(cid:218)pnej: sudo gem install compass -pre Jak odinstalowa(cid:202) wybran(cid:200) wersj(cid:218) Sass Je(cid:258)li co(cid:258) zacznie i(cid:258)(cid:202) nie po Twojej my(cid:258)li, zawsze mo(cid:285)esz cofn(cid:200)(cid:202) si(cid:218) do starszej wersji Sass za pomoc(cid:200) poni(cid:285)szego polecenia: gem uninstall sass --version numerwersji W miejsce cz(cid:239)onu numerwersji nale(cid:285)y wpisa(cid:202) (cid:285)(cid:200)dany numer wersji (na przyk(cid:239)ad 3.2.0.alpha.103). 36 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Sass i Compass dla pocz(cid:261)tkuj(cid:261)cych Tworzenie projektu Sass i Compass z poziomu wiersza polece(cid:241) Chcesz utworzy(cid:202) projekt Sass i Compass z poziomu wiersza polece(cid:241)? W tym celu musisz przej(cid:258)(cid:202) do folderu witryny (ja na przyk(cid:239)ad swoje witryny przechowuj(cid:218) w folderze o nazwie Sites) i wykona(cid:202) poni(cid:285)sze polecenie: compass create moj-projekt U(cid:285)yli(cid:258)my wbudowanego polecenia narz(cid:218)dzia Compass o nazwie create do utworzenia pro- jektu w folderze o nazwie moj-projekt. Gdy naci(cid:258)niesz klawisz Enter, Compass utworzy kilka plików i folderów. Poni(cid:285)ej pokazuj(cid:218) przyk(cid:239)adow(cid:200) struktur(cid:218) projektu utworzonego w systemie Windows: Do czego s(cid:239)u(cid:285)(cid:200) wygenerowane pliki w projekcie Compass Szczegó(cid:239)owy opis generowanych plików i folderów znajduje si(cid:218) w rozdziale 2. Na razie przedstawiam tylko krótki przegl(cid:200)d ich funkcji. Folder .sass-cache (utworzony o jeden poziom wy(cid:285)ej): folder zawieraj(cid:200)cy pliki podr(cid:218)czne wykorzystywane przez Sass w celu przyspieszenia budowy plików CSS. Nie trzeba z nim nic robi(cid:202). Folder sass: katalog na pliki Sass, w których b(cid:218)dziemy pracowa(cid:202). Nazwa sass jest domy(cid:258)lna i mo(cid:285)na j(cid:200) zmie- ni(cid:202) na dowoln(cid:200) inn(cid:200). Folder stylesheets: katalog na skompilowane pliki CSS wygenerowane przez Sass. Nazwa stylesheets jest domy(cid:258)lna w projektach Compass i mo(cid:285)na j(cid:200) zmieni(cid:202) na dowoln(cid:200) inn(cid:200). Plik config.rb: plik zawieraj(cid:200)cy domy(cid:258)lne ustawienia konfiguracyjne projektu, takie jak domy(cid:258)lne nazwy i lo- kalizacje folderów. Ponadto w pliku tym ustawia si(cid:218) metod(cid:218) kompresji generowanych plików CSS. 37 Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów Automatyczne kompilowanie kodu na CSS z poziomu wiersza polece(cid:241) Aby Compass „obserwowa(cid:239)” zmiany w plikach Sass (znajduj(cid:200)cych si(cid:218) w folderze sass projek- tu) i automatycznie kompilowa(cid:239) je na CSS po ka(cid:285)dym zapisaniu pliku, najpierw nale(cid:285)y przej(cid:258)(cid:202) do folderu zawieraj(cid:200)cego interesuj(cid:200)ce nas pliki Sass (aby od(cid:258)wie(cid:285)y(cid:202) sobie pami(cid:218)(cid:202) na temat potrzebnych polece(cid:241), mo(cid:285)esz jeszcze raz przeczyta(cid:202) ramk(cid:218) „Praca w wierszu polece(cid:241)” w pod- rozdziale „Instalacja Sass i Compass”). B(cid:218)d(cid:200)c w katalogu g(cid:239)ównym projektu (lista zawarto(cid:258)ci powinna zawiera(cid:202) plik config.rb), wykonaj poni(cid:285)sze polecenie: compass watch Dla narz(cid:218)dzia Compass oznacza ono: „Obserwuj ten projekt i je(cid:258)li zmieni si(cid:218) co(cid:258) w którym- kolwiek pliku Sass, skompiluj go do postaci CSS”. Od tej pory, je(cid:258)li zmienisz cokolwiek w plikach Sass i zapiszesz t(cid:218) zmian(cid:218), Compass automatycznie wykryje to zdarzenie i dokona ponownej kompilacji odpowiednich plików CSS (kompilowane pliki CSS domy(cid:258)lnie s(cid:200) zapisywane w folderze stylesheets projektu). Graficzne narz(cid:218)dzia do pracy z Sass i Compass Istnieje kilka graficznych narz(cid:218)dzi, które uwalniaj(cid:200) nas od konieczno(cid:258)ci zajmowania si(cid:218) ca(cid:239)ym tym gemowym ba(cid:239)aganem j(cid:218)zyka Ruby (wszystkie zawieraj(cid:200) w(cid:239)asn(cid:200) wersj(cid:218) interpretera) i kom- piluj(cid:200) pliki Sass na CSS. W podrozdziale tym przedstawiam trzy z nich: LiveReload (OS X i Windows), CodeKit (OS X) i Scout (OS X i Windows). Pocz(cid:200)tkowo z Sass i Compass pracowa(cid:239)em przy u(cid:285)yciu wiersza polece(cid:241), ale teraz, je(cid:258)li nie musz(cid:218) wykona(cid:202) jakiego(cid:258) konkretnego polecenia, na co dzie(cid:241) korzystam z LiveReload lub Code- Kit. Podkre(cid:258)lam jednak, (cid:285)e nie ma jedynego s(cid:239)usznego narz(cid:218)dzia. Wybierz po prostu to narz(cid:218)dzie, które najbardziej Ci si(cid:218) podoba. Bez wzgl(cid:218)du na to, co wybierzesz, wystarczy kilka klikni(cid:218)(cid:202), aby rozpocz(cid:200)(cid:202) automatyczn(cid:200) ob- serwacj(cid:218) wybranego katalogu. Pami(cid:218)taj tylko, aby uruchomi(cid:202) program, i mo(cid:285)esz ju(cid:285) pracowa(cid:202) z plikami Sass. Scout Scout to darmowe narz(cid:218)dzie zbudowane przy u(cid:285)yciu technologii Adobe Air. Jest dost(cid:218)pne do pobrania na stronie http://mhs.github.com/scout-app. Po zainstalowaniu uruchom program i klik- nij znajduj(cid:200)cy si(cid:218) w lewym dolnym rogu okna przycisk ze znakiem plus. Potem musisz skon- 38 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Sass i Compass dla pocz(cid:261)tkuj(cid:261)cych figurowa(cid:202) ustawienia, ale wystarczy, (cid:285)e zrobisz to raz i pó(cid:283)niej pliki b(cid:218)d(cid:200) kompilowane auto- matycznie. Ten program jest darmowy, ale osobi(cid:258)cie uwa(cid:285)am, (cid:285)e warto wyda(cid:202) par(cid:218) z(cid:239)otych na jedno z pozosta(cid:239)ych rozwi(cid:200)za(cid:241), które zapewniaj(cid:200) dodatkowe funkcje. CodeKit Program CodeKit jest dost(cid:218)pny tylko dla u(cid:285)ytkowników systemu Mac OS X (przykro mi, wielbiciele Windowsa i Linuksa). Ma (cid:258)wietny prosty interfejs u(cid:285)ytkownika i nie tylko kompi- luje pliki Sass (czy te(cid:285) pliki w kilku innych tego typu j(cid:218)zykach), lecz tak(cid:285)e dodatkowo od(cid:258)wie(cid:285)a okno przegl(cid:200)darki. To pozwala zaoszcz(cid:218)dzi(cid:202) naprawd(cid:218) du(cid:285)o czasu w pracy. Ponadto aplikacja ta umo(cid:285)liwia (cid:239)(cid:200)czenie plików i ma wiele innych funkcji. Jedn(cid:200) z najwi(cid:218)kszych zalet programu CodeKit jest to, (cid:285)e mo(cid:285)na w nim tworzy(cid:202) projekty Compass wprost z interfejsu. Wystarczy okre(cid:258)li(cid:202) ustawienia, wybra(cid:202) folder i to wystarczy, aby narz(cid:218)dzie automatycznie obserwowa(cid:239)o zmiany. Pe(cid:239)na wersja aplikacji kosztuje 25 dolarów, ale jest te(cid:285) dost(cid:218)pna darmowa wersja próbna z ograniczeniem czasowym, wi(cid:218)c mo(cid:285)esz najpierw sprawdzi(cid:202), czy aplikacja Ci si(cid:218) podoba (http://incident57.com/codekit/). 39 Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów LiveReload Program LiveReload podobnie jak CodeKit nie tylko kompiluje kod w j(cid:218)zykach typu Sass, lecz tak(cid:285)e od(cid:258)wie(cid:285)a przegl(cid:200)dark(cid:218), aby ukaza(cid:202) dokonane zmiany. Wystarczy nacisn(cid:200)(cid:202) znajdu- j(cid:200)c(cid:200) si(cid:218) na dole ikon(cid:218) plusa, znale(cid:283)(cid:202) potrzebny folderu z projektem i zaznaczy(cid:202) opcj(cid:218) Compile SASS, LESS, Stylus, CoffeeScript and others (kompiluj kod SASS, LESS, Stylus, CoffeeScript i inne). Program kosztuje 9,99 dolara (dla u(cid:285)ytkowników systemu OS X dost(cid:218)pny jest w App Store). Oprócz wersji dla systemu OS X dost(cid:218)pna jest te(cid:285) wersja dla systemu Windows (http://livereload.com). Utwórz pierwszy plik Sass w mniej ni(cid:285) dziesi(cid:218)(cid:202) sekund Pami(cid:218)taj, (cid:285)e ka(cid:285)dy plik CSS mo(cid:285)na bez problemu zamieni(cid:202) w plik Sass. W tym celu wystarczy zmieni(cid:202) roz- szerzenie .css na .scss. Po takiej zmianie otrzymasz w pe(cid:239)ni funkcjonalny i ca(cid:239)kowicie prawid(cid:239)owy plik Sass. 40 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Sass i Compass dla pocz(cid:261)tkuj(cid:261)cych Praca z plikami Sass w edytorach tekstu Edytory tekstu s(cid:200) jak dru(cid:285)yny sportowe — ka(cid:285)dy ma swój ulubiony. Nie istnieje nic takiego jak edytor tekstu, który jest odpowiedni lub nieodpowiedni do pracy z Sass. Cho(cid:202) oczywi(cid:258)cie obs(cid:239)uga sk(cid:239)adni tego j(cid:218)zyka bardzo pomaga, poniewa(cid:285) kolorowanie ró(cid:285)nych konstrukcji u(cid:239)atwia orientowanie si(cid:218) w kodzie (cid:283)ród(cid:239)owym. Na szcz(cid:218)(cid:258)cie wi(cid:218)kszo(cid:258)(cid:202) wysokiej jako(cid:258)ci edytorów tekstu standardowo obs(cid:239)uguje sk(cid:239)adni(cid:218) Sass lub ma zewn(cid:218)trzne wtyczki zapewniaj(cid:200)ce tak(cid:200) obs(cid:239)ug(cid:218). Aktualnie moim ulubionym edytorem tekstu jest Sublime Text (wieloplatformowy i dost(cid:218)pny pod adresem http:// sublimetext.com), chocia(cid:285) nie gorsze s(cid:200) Coda 2 (tylko dla systemu OS X — http://panic. com/coda), Espresso 2 (tylko dla systemu OS X — http://macrabbit.com) i Aptana (wieloplat- formowy — http://aptana.com). 41 Poleć książkęKup książkę Sass i Compass. Praktyczny przewodnik dla projektantów Podsumowanie W rozdziale tym przedstawi(cid:239)em kilka powodów, dla których warto korzysta(cid:202) z narz(cid:218)dzi Sass i Compass. Ponadto dok(cid:239)adnie opisa(cid:239)em, czym ka(cid:285)de z nich jest, do czego s(cid:239)u(cid:285)y i jaki ma zwi(cid:200)- zek z drugim. Pó(cid:283)niej pokaza(cid:239)em, jak zainstalowa(cid:202) Sass i Compass z poziomu wiersza polece(cid:241) (przy okazji wyja(cid:258)niaj(cid:200)c, do czego s(cid:239)u(cid:285)(cid:200) gemy Ruby) oraz przedstawi(cid:239)em kilka graficznych narz(cid:218)dzi obs(cid:239)u- guj(cid:200)cych Sass i Compass. Niezale(cid:285)nie od tego, które rozwi(cid:200)zanie wybra(cid:239)e(cid:258), teraz masz ju(cid:285) w swoim komputerze odpowiednie oprogramowanie do obserwowania zmian w plikach Sass i automatycznego ich kompilowania na CSS po ka(cid:285)dym zapisaniu. Uporali(cid:258)my si(cid:218) wi(cid:218)c z najwi(cid:218)kszym problemem utrudniaj(cid:200)cym rozpocz(cid:218)cie pracy z Sass i Compass. Skoro tak, to w nast(cid:218)pnym rozdziale mo(cid:285)emy utworzy(cid:202) pierwszy projekt. Dowiesz si(cid:218), jak zmienia(cid:202) ustawienia w pliku konfiguracyjnym, jak tworzy(cid:202) komentarze w plikach Sass, jak pos(cid:239)ugiwa(cid:202) si(cid:218) plikami cz(cid:218)(cid:258)ciowymi oraz jak upraszcza(cid:202) budow(cid:218) arkuszy stylów przez za- stosowanie w nich zmiennych. 42 Poleć książkęKup książkę Skorowidz A adres URI, 187 aplikacja Terminal, 32 automatyczna kompresja kodu, 28 automatyczne kolory, 24 kompilowanie kodu, 38 B biblioteka Modernizr, 73 b(cid:239)(cid:218)dy, 229 C Chrome Narz(cid:218)dzia dla programistów, 232, 235 ci(cid:200)g(cid:239)e przerysowywanie strony, 233 cienie, 173 cie(cid:241) tekstu, 169 clearfix, 98 Compass, 23, 29 CSS Lint, 231 CSS3, 25, 167 domieszki Compass, 168 CSScomb, 232 D definiowanie koloru, 94 kontekstu, 125 punktów brzegowych, 153 warto(cid:258)ci eksperymentalnych, 223 wielu cieni, 173 zmiennych, 57 desaturacja, 108 dodawanie, 198 jednostek, 209, 210 obrazów do t(cid:239)a, 178 stylów Modernizr, 73 wtyczek, 49 domieszka, 26, 63, 85 box-shadow, 172 hide-text, 184 isolate-grid, 146 MQ, 154 nth-omega, 142 pad, 139 post, 140 pre, 140 prefix, 136 pull, 141 push, 141 squish, 141 squish-text, 185 suffix, 138 domieszki do zamiany tekstu, 184 sk(cid:239)adnia podstawowa, 87 ustawienia domy(cid:258)lne, 88 w domieszkach, 102 dope(cid:239)nienie wokó(cid:239) obrazów, 183 duszki graficzne, 180 dyrektywa @debug, 213 @else if, 201 @extend, 65, 82, 158 @if, 201 @import, 125 @return, 212 @warn, 215 dyrektywy steruj(cid:200)ce, 201 dzielenie, 199 E edytor tekstu, 41 elastyczne siatki, 119 element testimonial, 80 elementy wizualne, 65 F filtry CSS, 193 folder .sass-cache, 46, 49 images, 46 partials, 55 sass, 47 font, 75 format HSLA, 24 PNG, 190 RGBA, 24 SVG, 190 Frain Ben, 13 funkcja, 22 adjust-color, 113 adjust-hue, 107 complement, 105 darken, 95 desaturate, 108 fade-in, 110 fade-out, 110 Poleć książkęKup książkę Skorowidz funkcja grayscale, 110 image-url, 177, 178 inline-image, 188 invert, 106 lighten, 95 mix, 112 opacify, 110 rgba, 111 saturate, 108 scale-color, 114 shade, 115 tint, 115 transparentize, 109 G generowanie kodu CSS, 91 gradient liniowy, 175 promienisty, 177 w tle, 175 HSL, 95 HSLA, 24 HTTP2, 54 H I importowanie plików partiami, 224 pliku cz(cid:218)(cid:258)ciowego, 56 instalowanie gemu oily_png, 181 Sass i Compass, 11 w systemie Mac OS X, 30, 32 w systemie Windows, 33 z wiersza polece(cid:241), 31 Susy, 123 instrukcja from through, 205 from to, 205 if-else, 155 interaktywna pow(cid:239)oka Sass, 223 interaktywny Compass, 224 interfejs wiersza polece(cid:241), 223 L LESS, 23 238 interpolacja, 205 interpreter Ruby, 31 inwersja, 106 jednostka, 209 em, 98 jQuery, 133 J K klasa .blockquote--small, 81 .no-fontface, 76 class-within, 78 nesting, 78 kod CSS, 23 kolory, 93 automatyczne, 24 definiowanie warto(cid:258)ci, 94 HSL, 95 HSLA, 24 przyciemnianie, 95 RGBA, 24 rozja(cid:258)nianie, 95 sk(cid:239)adnia rozja(cid:258)niania, 96 kolumny, 171 kombinacje funkcji, 117 obrazów i gradientów, 177 komentarze, 52 g(cid:239)o(cid:258)ne, 53 jednowierszowe Sass, 58 standardowe CSS, 58 kompilacja kodu Sass, 229 kompresja arkuszy stylów, 52, 53 GZIP, 161 kodu CSS, 28 konfiguracja duszk
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Sass i Compass. Praktyczny przewodnik dla projektantów
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: