#6 SASS + Compass: Rytm pionowy


27 września 2013 / Michał Załęcki


Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

Dzisiaj skupmy się nad tym jak stworzyć rytm pionowy za pomocą Compass. Zacznijmy od tego czym tak naprawdę jest rytm pionowy (ang. vertical rhythm). Rytm pionowy jest to prawidłowość w ustaleniu rozmiaru odstępów, skutkująca uporządkowanym i przemyślanym rozmieszczeniem elementów witryny, głównie tekstu, w pionie.

SASS i LESS

Richard Rutter w 2006 roku opublikował artykuł „Compose to a Vertical Rhythm”, w którym dosadnie wytłumaczył podstawy tej techniki. Pokaże Wam jak za pomocą Compass zmienić prostą i pozornie uporządkowaną witrynę taka jak ta:

Continue reading #6 SASS + Compass: Rytm pionowy


Tagi:


#5 SASS + Compass: Compass początki


7 września 2013 / Michał Załęcki


Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

Jak już pewnie wspomniałem w poprzednich wpisach tej serii Compass jest frameworkiem SASS. Dzisiaj zajmiemy się zdobyciem fundamentalnej wiedzy na jego temat tak aby później móc w pełni wykorzystać jego możliwości. Compass możemy podzielić na kilka części zawierających różne elementy, są to:

  • CSS3
  • Funkcje Pomocnicze
  • Layout
  • Reset
  • Typografia
  • Utilities (różne wstawki niepasujące do innych kategorii)

SASS i LESS

Importowanie Compass

By móc używać frameworku należy najpierw zaimportować go do naszego projektu za pomocą poniższego kodu, który najlepiej umieścić na samym początku pliku.

Kod ten sam w sobie nie powoduje żadnych zmian w wygenerowanym pliku CSS, ale daje dostęp do całej funkcjonalności Compass. Jeżeli zależy nam tylko na określonym elemencie, nie musimy importować całego frameworka. Poniższy kod powoduję dostęp do funkcjonalności zaokrąglania rogów, która znajduje się w części dotyczącej CSS3.

Instalacja pluginów

Instalacja pluginów do Compass jest banalna dzięki rubygems. Jeżeli ktoś preferuję normalize.css zamiast, używanego standardowo w Compass, reset 2.0 Erica Meyersa może zainstalować compass-normalize-plugin i używać normalize.css z SASS w bardzo wygodny sposób. Po instalacji za pomocą komendy.

Należy dodać jeszcze jedną linijkę w config.rb.

W samym pliku SASS trzeba już tylko zaimportować plugin i skorzystać z dostarczonej przez niego wstawki.

Bogactwo funkcji i wstawek

Po zaimportowaniu Compass do swojego projektu masz dostęp do ogromnej ilości funkcji i wstawek. Omówienie ich wszystkich nie ma większego sensu, na stronie dokumentacji Compass znajdziesz wszystkie potrzebne informacje, które zostały podzielone na mniejsze podzbiory powiązane ze sobą pod względem funkcjonalności. Dokumentacja ta jest napisana prostym językiem i poparta przykładami, jeżeli jednak coś nadal pozostawałoby niejasne napisz o tym w komentarzach lub na forum.

Compass, czyli jak zapomnieć o prefiksach

Używając Compass nie musimy już pamiętać o prefiksach, dla różnych silników przeglądarek internetowych, wystarczy, że używamy wstawek dedykowanych dla konkretnych funkcjonalności. Za przykład posłuży nam wstawka border-radius.

Podsumowanie

W tym miejscu można zadać sobie pytanie czy to już nie koniec tej serii wpisów, skoro dokumentacja Compass jest tak przyjazna. Bynajmniej. Pozostało jeszcze kilka zagadnień, które wymagają szerszego omówienia i nie da się ich zrealizować za pomocą jednej czy dwóch wstawek albo funkcji. Właśnie dlatego kolejny wpis serii poświęcę Vertical Rhythm.

Przydatne linki


Tagi:


#4 SASS + Compass: sterowanie przepływem


31 sierpnia 2013 / Michał Załęcki


Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

Jak nie trudno zauważyć SASS czerpie z języków programowania choć sam oczywiście nim nie jest, nie mniej jednak nie zabrakło instrukcji sterowania przepływem i właśnie na nich dzisiaj się skupię. Zgodnie z dokumentacją SASS instrukcje te nie zostały zaimplementowane po to by używać ich w „day-to-day styling”, a w funkcjach czy w wstawkach lub różnych bibliotekach by uczynić je bardziej elastycznymi. Nie wyklucza to oczywiście ich użycia w „zwykłym” kodzie, to jak zostaną wykorzystane zależy już od preferencji developera. Dzisiaj nie będę omawiał dokładnie działania instrukcji sterowania przepływem, zakładam, że ich idea i działanie jest już Ci znane z któregoś języka programowania, choćby JavaScript, PHP czy C, skupie się na ich konstrukcji.

SASS i LESS

Instrukcja warunkowa

Instrukcja warunkowa, jako jedna z najbardziej popularnych konstrukcji sterowania przepływem otwiera dzisiejsze zestawienie. Tutaj bez niespodzianek, ot taki prosty przykład.

Można też łączyć konstrukcje instrukcje warunkowe w bloki else if, przykład z dokumentacji:

Pętla FOR

Trzeba przyznać, że pętla for wygląda w SASS dość oryginalnie. Jak na pętle for przystało musimy podać pierwszą i ostatnią wartość jakie przyjmie (bądź do której dojdzie) zmienna iteracyjna. W SASS mamy dwa typy pętli for. Ze słowem kluczowym through i to. W przypadku tego ostatniego zmienna iteracyjna nie osiąga ostatniej wartości.

Pętla EACH

Pętla each działa na zbiorze elementów. Zbiór ten może zostać stworzony przed pętlą i przypisany zmiennej lub w samej pętli each.

Pętla WHILE

Pętla while będzie wykonywać się tak długo jak wyrażenie będzie zwracać prawdę. Konstrukcja ta zapewnia nam bardziej kompleksową kontrolę nad zmienną iteracyjną niż pętla for.

Podsumowanie

Jeżeli uczciwie zapoznałeś się z informacjami w tej i w poprzednich częściach tego kursu to masz podstawy, które pozwalają rozpocząć Ci pracę z Compass i właśnie tym zajmować będziemy się w kolejnych częściach kursu.

Przydatne linki


Tagi:


#3 SASS + Compass: wstawki, funkcje i dziedziczenie selektorów


28 sierpnia 2013 / Michał Załęcki


Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

Wstawki i funkcje są jednymi z najpotężniejszych narzędzi developera pracującego z SASS. Pomagają tworzyć kod zgodny z DRY i znacząco ułatwiają nam pracę. Dziedziczenie selektorów można porównać do dziedziczenia w programowaniu obiektowym, chodź w tym przypadku dziedziczone są tylko właściwości, ale żeby nie przedłużać przejdźmy do konkretów.

SASS i LESS

Continue reading #3 SASS + Compass: wstawki, funkcje i dziedziczenie selektorów


Tagi:


#2 SASS + Compass: kompilacja, zmienne i zagnieżdżanie


15 sierpnia 2013 / Michał Załęcki


Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

W poprzednim wpisie przygotowaliśmy wstępnie środowisko pracy oraz stworzyliśmy pierwszy projekt. Teraz wypadałoby iść za ciosem i wykorzystać ten projekt w praktyce. W pierwszej kolejności włącz konsole i przejdź do głównego katalogu ze swoim projektem (katalog zawierający plik config.rb). Aby uruchomić kompilacje.

SASS i LESS

Continue reading #2 SASS + Compass: kompilacja, zmienne i zagnieżdżanie


Tagi:


#1 SASS + Compass: Instalacja i podstawowe komendy


27 lipca 2013 / Michał Załęcki


Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

SASS z definicji swoich twórców jest rozszerzeniem funkcjonalności CSS3. W praktyce jest preprocesorem CSS bardzo podobnym w swoich założeniach do LESS. Osobiście zdecydowanie preferuje SASS, ma większe możliwości, więcej frameworków (choćby Compass czy Inuit.css) i przyjemniej się z nim pracuje, choć jest to (nie tylko) moja subiektywna opinia.

Continue reading #1 SASS + Compass: Instalacja i podstawowe komendy


Tagi: