Sass (SCSS) jest najpopularniejszym preprocesorem CSS, który ułatwia nam edycję kodu oraz zdecydowanie poprawia jego czytelność. Możemy dzięki niemu tworzyć własne funkcje, zagnieżdżać selektory oraz wiele innych, które zostały już opisane na naszym blogu tutaj: https://www.rekinysukcesu.pl/blog/internet/preprocesory-css-po-co-mi-to-wstep-do-sass-scss.
W tym wpisie poruszymy temat najlepszych praktyk, które zdecydowanie korzystnie wpłyną na nie tylko sam wygląd kodu, ale też naszą pracę!
1. Stwórz przejrzystą i łatwą do zarządzania strukturę Sass-a
Nie ukrywajmy, chaos i bałagan są jednymi z najbardziej utrudniającymi pracę czynników. Możemy stracić sporo cennego dla nas czasu, aby odszukać np. interesujący nas plik w rozbudowanym projekcie, który może zawierać setki, a nawet tysiące plików. W pewnym momencie możemy się naprawdę zagubić i głowić nad tym, gdzie zapisaliśmy dany plik. Jednak jest prosty sposób, aby temu zapobiec… Wystarczy, że wprowadzimy strukturę folderów! Dla przykładu wszystkie mixins oraz variables możemy składować w folderze “utils”, osobne style do innych podstron w “pages” itd. Na pozór wydaje się to być śmieszną i mało znaczącą sprawą, ale uwierzcie nam na słowo, bardzo usprawni to pracę przy projektach w Sass-ie, a w szczególności tych większych! Aby użyć tych plików, wystarczy, że w naszym głównym pliku .scss umieścimy “@import ‘katalog/nazwa_pliku”;
2. Ogranicz zagnieżdżanie w Sass-ie
Niestety wszystko ma swoje dwie strony medalu, nie inaczej jest z zagnieżdżeniem. Jest ono bardzo dużym ułatwieniem, bo działamy według reguły DRY (Don’t Repeat Yourself), ale jego nadużywanie może stać się dla nas zbędnym utrudnieniem. W tej chwili nasuwa się pytanie, czemu z ostrożnością używać czegoś, co Sass wprowadził, aby ułatwić nam życie? Przede wszystkim kod staje się coraz cięższy do przeczytania, a w szczególności dla kogoś, kto nie jest zaznajomiony z naszym kodem. Ponadto tworzą się bardzo skomplikowane i zbyt specyficzne selektory, co całkowicie przeciwstawia się regule KISS (Keep it Simple, Stupid). Otwiera nam to drogę do większej liczby literówek i konieczności wielokrotnego otwierania różnych elementów, jeśli chce się zmienić nazwę komponentu. Dlatego zapamiętajcie, DRY KISS!
3. Mądrze używaj zmiennych w Sass-ie!
Niby oczywista rzecz, ale nie do końca poprawnie używana przez wszystkich, zmienne. Każdemu z nas w Sass-ie zdarzyło się tworzyć zmienne, które przechowywały np. kolor. Jak w większości przypadków je nazywaliśmy? Nazwą koloru… Powinniśmy nazywać nasze zmienne mniej ogólnikowo, w tym przypadku lepiej skupić się na konkretach! Starajmy trzymać się konwencji metodyki BEM. Co to znaczy? W skrócie, stosujemy takie nazewnictwo, które będzie najbardziej informacyjne dla programisty. Jako przykład można użyć kontenera main. Chcielibyśmy ustalić mu kolor czcionki i tła:
Pozwala to na użycie ogólnego terminu dla naszej zmiennej w arkuszach stylów, a jednocześnie pozostawia deklarację zmiennej w jednym miejscu, dzięki czemu możemy zaoszczędzić czas na jej późniejszą zmianę, jeśli zajdzie taka potrzeba.
4. Unikaj powtarzania Sass-owych Mixins
Mixins pozwalają na to, abyśmy mogli w łatwy sposób wielokrotnie używać stylów. Mogą one zawierać własne reguły stylu, które mogą być zagnieżdżone w innych regułach oraz służyć do modyfikacji zmiennych. Jednak niepoprawne ich używanie prowadzi do wprowadzenia sporej powtarzalności w kodzie, tworzy masę zduplikowanego kodu i może spowodować powiększenie pliku CSS. Pytanie brzmi, jak w takim razie poprawnie ich używać? Tutaj z pomocą służą nam argumenty. Jeżeli dla przykładu chcielibyśmy stworzyć w Sass-ie mixin dla buttonów to moglibyśmy użyć dwóch argumentów, $size oraz $arc:
Mixin ten możemy zainicjować w następujący sposób:
5. Sass pozwala na zagnieżdżanie reguły @media. Koniecznie to wykorzystaj!
Z zasady reguły @media umieszczamy na samym końcu pliku css, gdzie w każdej regule były modyfikowane konkretne klasy dla danej np. rozdzielczości. Możemy ułatwić sobie sprawę i umieszczać reguły @media w interesujących nas klasach. Zaleca się, aby nie były one zagnieżdżane wewnątrz każdego selektora. Ułatwi nam to pracę, kod zrobi się czytelniejszy a, przy okazji zaoszczędzi sporo czasu, ponieważ nie będziemy musieli scrollować na sam dół pliku po to, aby zmienić tylko jedną wartość dla danego @media. Możemy to po prostu łatwo wykonać w interesującym nas selektorze! Jak to zrobić? Przedstawiamy poniżej na przykładzie formularza:
6.Podsumowanie
Powyższe przykłady pokazują jak w prosty sposób ułatwić sobie pracę z pre procesorem Sass. Dzięki nim będziemy mogli w łatwiejszy sposób zarządzać strukturą naszego projektu, co wpłynie na większą przyjemność z używania go. Co najlepsze są to praktyki, które każdy z nas jest w stanie szybko przyswoić, a stosowanie ich na co dzień bardzo ułatwi nam pracę. Jedno jest pewne, w przyszłości podczas pracy na większych projektach na pewno nie raz będziemy sobie dziękować za to, że zaczęliśmy działać według tych porad! Przestrzeganie tych praktyk jest kluczowe przy realizacji projektów. Jeśli potrzebujesz pomocy w projektowaniu stron internetowych Wrocław - zapraszamy!