Dzielenie kodu na mniejsze części

Dzięki zmiennym czy zagnieżdżaniu styli, łatwiej jest zapanować nad całością kodu. Jednak pojedynczy plik może stać się zdecydowanie za długi. Należy coś z tym zrobić! Wspomniałem już, że zmienne najlepiej jest definiować jako globalne w osobnym pliku. Nadszedł więc czas, aby nauczyć się korzystać z tej funkcjonalności SASSa.

Zasady podziału na pliki

Skoro mamy już taką możliwość to jak najlepiej podzielić pliki SASS? Nie ma na to jednoznacznej odpowiedzi. To jest Twoja indywidualna decyzja. Poniżej wypiszę kilka własnych uwag, którymi możesz się sugerować:

• Tak jak już napisałem wyżej, najlepszym sposobem na zapis zmiennych, jest trzymanie ich w osobnym pliku np. _variables.scss .
• Utwórz sobie plik _mixin.scss , dowiesz się do czego będzie Ci potrzebny w dalszej części kursu.
• Bardzo dobrym pomysłem jest tworzenie dla każdego komponentu / części layoutu nowego pliku SCSS, w którym będą znajdować się style dotyczące tylko tej części szablonu. Dobrze jest go zacząć od klasy, która będzie “kontenerem” danej części strony po to, aby przypadkowo nie użyć takich sam nazw klas które będą dotyczyły innych części strony (jest to namiastka przestrzeni nazw , którą być może znasz z innych języków programowania).
• Skoro w systemie będą istniały pliki które będą dotyczyć konkretnych części strony, warto też utworzyć plik _global.scss , w którym zapiszesz style dotyczące całej strony.
• Osobiście tworzę również osobne pliki _typography.scss , _inputs.scss oraz _buttons.scss , w których zamieszczam odpowiednie style. Bardzo mocno polecam to robić, gdyż w ten sposób “za jednym zamachem” porządkujemy sobie kod i ograniczamy rozmiar pliku wynikowego.
• W głównym pliku w którym importujesz wszystkie inne części składowe styli, nie powinno znaleźć się nic poza importem plików. Tak dla zachowania czystości i porządku w kodzie

Import plików

Jeśli przeczytałeś uważnie powyższą listę to pewnie już zauważyłeś, że nazwy wszystkich plików przeznaczonych tylko do importu, zaczynają się od znaku_. Tym znakiem oznacza się ”pliki składowe”, czyli takie których kod wynikowy pojawi się tylko wtedy, kiedy zostaną zaimportowane w innym pliku.

Innymi słowami jeśli wszystkie pliki zostaną nazwane bez symbolu_z przodu, to liczba plików wejściowych będzie równać się liczbie plików wyjściowych. Nie jest to żaden błąd systemu lub uciążliwa przypadłość. Wyobraź sobie, że Twój serwer wspiera protokółHTTP2i chciałbyś mieć jak największą liczbę małych plików. W takiej sytuacji możesz objąć inną strategię i nie korzystać z importowania wszystkich plików w jednym - głównym, ale korzystać z możliwości utworzenia wielu plików importując przy tym tylko te najważniejsze części, np. zmienne.

W tej lekcji jednak pokażę Ci przede wszystkim jak importować pliki które będą częściami składowymi. Wyobraź sobie, że masz w swoim folderze pliki_global.scss,_variables.scssi_buttons.scss. Twój główny plik w którym importujesz części składowe powinien zatem wyglądać tak:

Jak łatwo jest zauważyć przy imporcie nie musisz pisać ani znaku pliku składowego_, ani też rozszerzenia. Od tej drugiej zasady jest jeden wyjątek. Możesz również importować przy pomocy@importstandardowe pliki CSS. Wtedy musisz podać nazwę pliku oraz rozszerzenie.

Przy imporcie plików pamiętaj o tym, że zawsze musisz podać ścieżkęWZGLĘDNĄdo importowanego pliku. Nigdy nie używaj ścieżki bezwzględnej, chyba, że korzystasz z task managera i posiadasz niestandardową konfigurację skryptu.

Pamiętaj również o tym, aby importować plik zawierający zmienne jako pierwszy w kolejności. Jest to spowodowane tym, by przy kompilacji system już wiedział jakie zmienne ma do wykorzystania. Dla pewności możesz również importować zmienne wewnątrz innych plików składowych. Osobiście robię tak za każdym razem, z dwóch powodów. Po pierwsze likwiduje to jakiekolwiek błędy o braku zmiennej, które generuje IDE, a po drugie nie powoduje to zwiększenia objętości pliku. Zmienne czy mixiny, których będziemy używać już za chwilę, nie generują się w żaden sposób w kodzie CSS. Generuje się jedynie ich kod wynikowy.

Zadanie 1

Kod SCSS się nie uruchamia. Brakuje zmiennych oraz mixinucenter().

Musisz zaimportować plikivariablesimixins.

Podsumowanie

W tej lekcji nauczyłeś się jakich zasad trzymać się w tworzeniu struktury plików SASS, a także w jaki sposób nadawać im odpowiednie nazwy. Poznałeś sposoby importowania plików będącymi częściami składowymi styli.