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)
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.
1 | @import "compass"; |
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.
1 | @import "compass/css3/border-radius" |
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.
1 | $ gem install compass-normalize-plugin |
Należy dodać jeszcze jedną linijkę w config.rb.
1 | require 'normalize' |
W samym pliku SASS trzeba już tylko zaimportować plugin i skorzystać z dostarczonej przez niego wstawki.
1 2 | @import "normalize"; @include normalize; |
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.
1 2 3 | .round { @include border-radius(50%); } |
1 2 3 4 5 6 7 | .round { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } |
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
- #1 SASS + Compass: Instalacja i podstawowe komendy
- #2 SASS + Compass: kompilacja, zmienne i zagnieżdżanie
- #3 SASS + Compass: wstawki, funkcje i dziedziczenie selektorów
- #4 SASS + Compass: sterowanie przepływem
- Dokumentacja Compass
