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
Komentarze
Prześlij komentarz