2 użyteczne sposoby na strukturyzowanie plików SASS

W każdym projekcie ważne jest zachowanie przejrzystej struktury plików. Niezależnie od tego czy tworzysz rozbudowaną aplikację webową czy prostą stronę typu onepage, powinieneś korzystać z jakiegoś sposobu strukturyzowania plików.

W tym artykule poznasz 2 sposoby na tworzenie struktury  plików SASS/SCSS. Jeden z nich będzie idealny w przypadku prostych projektów. Drugi z powodzeniem będziesz mógł wykorzystać pracując przy większych projektach.

Prosta struktura

Jeśli pracujesz nad prostym projektem takim jak np. prosty onepage to tworzenie skomplikowanej struktury mija się z celem. Lepiej sprawdzi się skupienie na kilku podstawowych plikach:

  • _core.sass – zawiera wszystkie zmienne, mixiny, resety itp.,
  • _layout.sass – zawiera style dotyczące struktury layoutu (kontenerów i systemów grid),
  • _components.sass – zawiera kod, z którego korzystamy wiele razy w obrębie projektu (przyciski, formularze, nawigacja itd.),
  • app.sass – główny plik, który powinien jedynie importować kod z wymienionych wyżej plików.

sass prosta struktura

Zaletą tej metody jest przede wszystkim jej prostota. Pracując tylko z czterema plikami tworzymy przejrzystą strukturę, która ułatwi nam nie tylko tworzenie samego projektu, ale również jego zmiany w przyszłości.

Jeśli jednak tworzysz większy projekt (np. rozbudowany serwis czy też aplikację webową) to powinieneś wybrać tzw. Sass 7-1 Pattern.

Wzór 7-1 (Sass 7-1 Pattern)

Pochodzenie nazwy tej struktury jest proste – 7 folderów, 1 plik. Wszystkie części składowe umieszczamy w 7 folderach. 1 plik odnosi się do głównego pliku (kompilowanego później do .css) – main.sass.

Struktura składa się z następujących części:

  • base – katalog zawierający podstawę projektu (reset, typografia, podstawowe style),
  • components – folder zawierający wszystkie powtarzalne komponenty projektu (przyciski, zakładki, okna modal itd.),
  • layout – katalog zawierający style niezbędne dla layoutu strony (header, footer, grid, sidebar itd.),
  • pages – folder zawierający style dla indywidualnych podstron w obrębie projektu,
  • themes – katalog zawierający style dla poszczególnych motywów (jeśli projekt z nich korzysta),
  • utils – folder zawierający zmienne, funkcje, mixiny i klasy SASS,
  • vendors – katalog zawierający style zewnętrznych bibliotek i frameworków,
  • main.sass – główny plik zawierający jedynie importy z powyższych plików.

sass 7 1

Na Githubie możesz znaleźć gotowy boilerplate z przedstawioną wyżej strukturą. Bez przeszkód możesz go wykorzystać w każdym większym projekcie.

Architektura 7-1 jest popularnym rozwiązaniem i jej znajomość oprócz ułatwienia pracy nad Twoimi projektami, będzie niewątpliwym autem u przyszłego pracodawcy.

 

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

Kurs SASS dla początkujących cz.2 Operatory, pętle i dziedziczenie 10 użytecznych mixin SASS dla Twojego kolejnego projektu Kurs SASS dla początkujących cz.1 Zagnieżdżanie, zmienne i domieszki
View Comments
Bądź pierwszą osobą, która skomentuje ten wpis.