Od Sass-a do Lasa (39)

 

Miałem już sobie odpuścić i tego wpisu nie pisać, ale potem pomyślałem, że nie mogę nie pisać, bo wypadnę z rytmu i się rozleniwię, a tego nie chcę. Poza tym na początku pisania bloga mówiłem o tym, że będę publikował wpisy co tydzień, choćby skały srały i tego będę się trzymał.

Miniony tydzień był tygodniem pracy nad moją stroną. Postanowiłem wrzucić ja do review na dwóch grupach frontendowych na Discordzie, do których należę no i „dostałem to, com chciał” 🤪 Tak poważnie to nie jest źle, została mi zwrócona uwaga na kilka błędów do poprawienia w zasadzie od ręki, muszę przemyśleć też trochę BEMa, w sekcji <main> jest za dużo zagnieżdżeń i za mało modułowo. Nie jest to niezbędne, ale chcę to przemyśleć i poprawić.

Poza tym delikatnie zasugerowano mi, żebym przeszedł jakiś kurs designu, bo można tu się do wielu rzeczy przyczepić. Znalazłem już darmowy kurs z podstaw designu na Coursera (jest to platforma współpracująca z wieloma prestiżowymi uniwersytetami oraz korporacjami oferująca opracowywane przez nie kursy i można tam znaleźć wiele darmowych kursów, m.in. tam znalazłem kurs „Learning how to learn”, o którym już wielokrotnie pisałem). Przeszedłem już kilka lekcji, kurs jest zaplanowany na 5 tygodni, ale łącznie jest to ok 9h materiałów, więc spokojnie można go ukończyć szybciej. Mam nadzieję, że da mi to podstawy do bardziej nowoczesnego projektowania frontendu.

Natomiast to, co tak naprawdę zajęło mi większość czasu to Sass partials. Zwrócono mi uwagę, że skoro korzystam z Sass, to powinienem też korzystać z partials, czyli ogólnie mówiąc dzielenia pliku styli na mniejsze elementy. Jednym z takich wzorców jest metoda 7-1 pathern. Polega ona na tym, że style rozdysponowane są w małych plikach posegregowanych tematycznie w 7 katalogach, a całość za pomocą odpowiednich komend przekazywana jest do głównego pliku, main.scss.

Postanowiłem tę metodę zaimplementować w moim projekcie, ale oczywiście podobnie jak to miało miejsce z metodologią BEM, musiałem przewertować sporą ilość blogów, vlogów i innych dokumentacji, żeby zrozumieć to wszystko na tyle dobrze, żeby bez większych rozterek wiedzieć jakie style gdzie umieszczać.

Jak już mi się udało to zrozumieć, to pojawił się problem z tym, jak to zrobić, żeby ostatecznie wszystko to zostało za pośrednictwem main.scss skompilowane do pliku main.css i żeby po tej kompilacji wszystko działało jak wcześniej. Kiedyś do tego celu używało się jednej komendy @import i ten proces był bardzo prosty. Jednak ta metod mogła powodować pewne komplikacje, np. konflikt zmiennych (nie wnikając w szczegóły, mogło się zdażyć, że do jednej nazwy zmiennej zostanie przypisanych więcej niż jedna wartość). Dlatego metoda @import jest już nieaktualna (choć jak się okazuje i tak jeszcze znaczna część frontendowców się nią posługuje), a w zamian stosuje się 2 polecenia: @forward i @use.

Jak dokonałem podziału mojego sass'a na małe partie posegregowane w odpowiednich katalogach i zastosowaniu @forward i @use wszystko mi się rozjechało i VSCode a w zasadzie dodatek Live Sass Compiler wygenerował plik index.css, a nie chciał wygenerować pliku main.css. Pierwszym podejrzanym zamieszania został właśnie ten dodatek. Gdzieś wyczytałem, że od lat nie jest już wspierany, więc uznałem, że po prostu już nie ogarnia nowej metody łączenia ze sobą danych z plików .scss.

Zacząłem więc szukać innej metody kompilacji sass do css w czasie rzeczywistym, którą można zastosować w VSC i tak doszedłem do tego, że jest nowy dodatek o tej samej nazwie co poprzedni, ale rozwijany i wspierany przez Glenna Marksa (poprzedni rozwijany był przez Ritwicka Dey'a, trzeba być czujnym, bo oba pod taką samą nazwą są nadal dostępne w dodatkach VSC). Niestety okazało się, że nieaktualny dodatek nie był głównym winowajcą, bo po jego zainstalowaniu nadal kompilacja nie działała tak, jak powinna.

Ostatecznie okazało się, że po prostu źle stosuję @use i @forward, a prawidłowe ich użycie poznałem dopiero po obejrzeniu 40 min z czterogodzinnego kursu „Sass, BEM, & Responsive Design” prowadzonego przez sympatyczną dziewczynę na jej kanale YouTube — Coder Coder.

Ostatecznie udało mi się to w końcu ogarnąć i wdrożyć jak należy, a teraz mierzę się z nowym wyzwaniem, jakim jest GIT i GitHub. System KontrolI Wersji, jakim jest GIT, wydawała się miły i przyjemny dopóki jedyne, z czego korzystałem, to było wysyłanie commitów na GitHub za pośrednictwem przycisku w Visua Studio Code 🤪. Schody się zaczęły jak po kilku dniach walki z Sass'em i narobieniu sporego bałaganu w commitach na GitHub postanowiłem przywrócić wcześniejszą wersję projektu i usunąć niepotrzebne commity i tym zajmuję się od początku tego tygodnia, ale o tym napiszę za tydzień.

Mam nadzieję, że jeszcze w tym tygodniu uda mi się ustalić plan działań na najbliższe, wakacyjne tygodnie, a w kolejnym wpisie go opisać i wdrożyć od przyszłego tygodnia.

"Krytyka jest czymś, czego możemy łatwo uniknąć nie mówiąc nic, nie robiąc nic i będąc nikim." ~ Arystoteles 

Nigdy nie rezygnuj z marzenia, tylko dlatego, że zrealizowanie go wymaga czasu. Czas i tak upłynie. ~ Earl Nightingale