Top 5 praktyk ułatwiających korzystanie z Sass

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”;

Struktura Sass

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!

Zagnieżdżanie w Sass

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:

Zmienne w Sass

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

Mixin ten możemy zainicjować w następujący sposób:

Używanie Mixin

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:

Reguła @media

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!

Szukasz efektywnej agencji interaktywnej?

Na naszą efektywność składa się ponad 10-letnie doświadczenie, stale rozwijająca się kadra specjalistów i rzetelne oraz uczciwe podejście do Klienta. Wiemy jak osiągnąć założone cele w błękitnym i czerwonym oceanie marketingu online.

Agencja marketingowa RekinySukcesu.pl to ponad 350 zadowolonych Klientów, ponad 2 000 przeszkolonych osób, ponad 500 tys. zł obsługiwanego w roku budżetu w kampaniach PPC. Sumując wszystkie dane, użytkownicy spędzili już łącznie ponad 90 lat na wyprodukowanych przez nas stronach internetowych. A nam ciągle mało. Nie uznajemy kompromisów. Dlatego warto kliknąć jeden z przycisków poniżej i umówić się na wizytę we Wrocławiu, Kłodzku lub na spotkanie online.

Zobacz inne:

close
keyboard_arrow_up