Dodatek

Poznałeś już podstawowe zagadnienia związane z SASS. Czas, abyś zainstalował kompilator na własnym komputerze i zaczął działać na własną rękę. Poznasz też ciekawostki na temat wykorzystywania SASS w praktyce.

Jak używać SASS na komputerze?

W poprzednich lekcjach do sprawdzenia poprawności swojego kodu używałeś edytora na naszej stronie Kodologia. Teraz nadszedł czas, aby zainstalować kompilator SASS na własnym komputerze, abyś mógł go użyć do swoich własnych projektów. Możesz to zrobić na dwa podstawowe sposoby.

Pierwszą opcją jest zewnętrzna aplikacja z interfejsem graficznym. Przydaje się do podstawowych działań z SASS. Ze swojego doświadczenia polecam aplikacjęKoala. Jest to darmowa, open source’owa aplikacja, która dostępna jest na Windowsa, Linuxa oraz OSX. Oprócz Koali istnieją inne aplikacje tego typu. Oficjalną listę znajdzieszpod tym linkiem.

Drugim, bardziej zaawansowanym i profesjonalnym sposobem jest instalacja kompilatora z poziomu linii komend. Będzie to przydatne w przyszłości gdybyś chciał połączyć owy kompilator z którymkolwiek z task managerów (Gulp,Grunt,Webpackitd.). Pierwszym krokiem jaki musisz wykonać jest instalacja Ruby. Jeśli używasz systemu OSX nie będziesz miał z tym problemu, bowiem Ruby jest domyślnie zainstalowane w systemie. Jeśli używasz systemu Windows polecam skorzystać zRuby Installer. Jest to aplikacja, która w łatwy i szybki sposób zainstaluje i skonfiguruje całe środowisko dla Ruby. W Linuxie natomiast najlepiej jest skorzystać z narzędziaRVM. Instrukcję instalacji znajdziesztutaj.

Po instalacji Ruby na swoim komputerze nadszedł czas zainstalować kompilator SASSa. Otwórz dowolny terminal i wykonaj komendę:

Jeśli otrzymasz komunikat o braku uprawnień w systemie Unixowym, spróbuj wykonać komendę z prawami administratora.

Aby sprawdzić czy SASS został poprawnie zainstalowany na Twoim komputerze wykonaj dla pewności komendę:

W terminalu powinieneś otrzymaćSASS x.x.x, czyli aktualnie zainstalowaną wersję kompilatora na komputerze. W tym momencie na swoim komputerze zainstalowałeś już kompilator SASS i możesz go swobodnie zacząć używać. Najprostszym sposobem na jego włączenie, jest uruchomienie watchera, czyli komendy która będzie działać w tle i kompilować SASS do pliku CSS przy każdej zmianie w jakimkolwiek pliku w podanej przez Ciebie ścieżce. Aby uruchomić watcha należy wykonać komendę:

Po uruchomieniu tej komendy nie zamykaj terminala!Zamykając terminal wyłączysz proces i nigdy już style nie zostaną przekompilowane. Podczas pisania styli polecam czasami zerkać na terminal czy nie pojawiają się tam błędy. Zazwyczaj to właśnie tam kompilator oznajmi Ci, że popełniłeś błąd. Jeśli używasz IDE Webstorm to polecam Ci włączyć tą komendę w terminalu dostępnym w Webstormie. Dzięki temu zamykając program, zakończysz też działanie watcha i nie zostawisz w tle uruchomionej komendy.

Dlaczego SASS świetnie nadaje się do BEM?

Pisząc style CSS zazwyczaj nadajemy im nazwy odpowiednie do tego co przedstawia dany element. Większość programistów używa się zapisu w stylukebab-case(tak, naprawdę tak to się nazywa) i nadajemy klasom nazwy, które łatwo zapamiętamy. Problem zaczyna się jednak, gdy projekt bardzo mocno się rozrasta i zaczynamy gubić się we własnym kodzie. Z pomocą przychodzi metodologiaBEM. Nie jest to nowy język czy prekompilator. Nie będziesz musiał też zbyt wiele się uczyć w tym kontekście. BEM to po prostu_metodologia_według której powinny być zapisane wszystkie klasy w stylach. Składa się on z trzech elementów, a mianowicie: Block, Element i Modifier, czyli kolejno: blok, element i modyfikator.

• Blok : ogólna klasa np. .header , .container czy .menu
• Element : skonkretyzowany element w bloku np. .header__title , .container__box czy .menu__item
• Modyfikator : opisuje stan w jakim znajduje się dany element np. .container__box--disabled , .menu__item--active czy .input__radio--checked

Zapis w CSSie powinien wyglądać następująco:

Jak widzisz pomiędzy poszczególnymi składowymi metodologii BEM znajdują się różne, nazwijmy to, operatory:

• __
  • rozdziela blok i element;
• --
  • rozdziela element i modyfikator.

Musisz też wiedzieć, że zgodnie z metodologią BEM elementów może być wiele, podobnie jak modyfikatorów, jednak blok może być tylko i wyłącznie jeden. Po więcej szczegółów na temat samej metodologii BEM zapraszam Cię na oficjalną stronęhttp://getbem.com/.

Ta część lekcji nazywa się jednak “Dlaczego SASS świetnie nadaje się do BEM?”, więc przejdźmy do sedna. Jak już doskonale wiesz SASS umożliwia zagnieżdżanie styli, dlatego w bardzo łatwy sposób można zastosować tutaj metodologię BEM w następujący sposób:

W ten sposób umożliwiamy sobie pisanie czystego i przejrzystego kodu z użyciem BEM. Dodatkowo mamy przecież możliwość zapisania w kodzie wielu takich elementów i modyfikatorów co znacząco ułatwia pracę. Jednak pójdźmy o krok dalej i napiszmy sobie dwa mixiny:

Mixinebędzie odpowiadał za utworzenie elementu, a mixinmza utworzenie modyfikatora w danym bloku. Jeśli jest Ci wygodniej możesz napisać tam całe nazwy element i modifier. Dla mnie po prostu mniej tekstu jest bardziej przejrzyste. Pojawił się tutaj też element@content. Odpowiada on za umieszczenie kodu w tym miejscu, w którym został on użyty. Zapiszmy teraz przykładową klasę z użyciem BEM i powyższych mixinów:

Dzięki takiemu zapisowi nie musisz w stylach nawet pamiętać który “operator” rozdzielał jakie elementy w BEM. Po prostu robisz swoje! Obie wersje są poprawne i istnieją zwolennicy obu wersji. Jedno jest pewne, warto zorganizować sobie jednolitą metodologię pracy, tak, aby kod był jednolity i jednakowo rozumiany przez większą ilość developerów.

Zadanie 1

W tym zadaniu Twoim celem jest ustawienie dla elementu.header__logo--bigpogrubionej czcionki (bold) i jej rozmiaru na24px.

Wykorzystaj przy tym metodologie BEM i cechy SASSa.

@at-root co to takiego?

W ostatnim punkcie dodatku poruszymy temat jeszcze jednego elementu dostępnego w SASS. Czasami wykorzystując SASS dotrzesz do sytuacji w której zagnieżdżanie elementów stanie się problemem aniżeli zaletą tego preprocesora. Prostym i praktycznym przykładem będzie animacja w CSS3. Jak już pewnie wiesz, możesz w CSS zapisać animację w formie@keyframes. Jest to lista kroków którą przeglądarka powinna wykonać na animowanym elemencie. Niestety@keyframespowinniśmy zawsze zapisywać bez żadnych elementów nadrzędnych. W SASSie napisać ten blok poza elementem to spory grzech, dlatego na pomoc przychodzi nam atrybut@at-root. Dzięki niemu kawałek kodu który zostanie napisany po nim będzie znajdował się poza aktualnym elementem, na samej górze w drzewie zależności. Jednym słowem nie będzie posiadał żadnych elementów nadrzędnych (rodziców), czyli tak jak powinno być np. w przypadku@keyframes. Dość teorii, czas na przykład:

Powyższy kod wygeneruje nam poniższy kod CSS:

Jak widzisz@keyframesnie posiadają żadnego elementu rodzica, są elementem nadrzędnym, czyli tak jak powinno być. Taki efekt jest właśnie zasługą atrybutu@at-root.

Podsumowanie

W tym miejscu pora zakończyć ten kurs SASS. Dowiedziałeś się już wszystkiego, co jest Ci potrzebne, aby sprawnie tworzyć style z pomocą prekompilatora SASS. Dziękuję Ci za dotrwanie do samego końca tego kursu i życzę Ci powodzenia w dalszym rozwijaniu swoich umiejętności.