Przestań Używać @import W SASS!
HTML-код
- Опубликовано: 16 сен 2024
- W tym odcinku dowiesz się, dlaczego nie powinno się korzystać z @import w SASS oraz poznasz nowsze alternatywy - @use oraz @forward. 🙂
🔸 Kursy tworzenia stron WWW: mmcschool.pl/
🔹 Dołącz na Discorda: / discord
🔹 Hostinger (mój link polecający): www.hostg.xyz/...
Jeśli szukasz dobrego i sprawdzonego hostingu, kliknij powyższy link. 🙂
Korzystam z Hostingera od wielu lat, wszystko działa wyśmienicie, support mają genialny, tak więc postanowiłem dołączyć do ich programu partnerskiego. Kupując z linku wyżej, część pieniędzy trafi do mnie. Dzięki za wsparcie! 🙂
Wpadnij na Discorda! 🙂
discord.gg/yjRBKgxpBV
Materiał oglądam ze spóźnieniem ale jestem pełen uznania dla Majka. Przeszedłem jeden kurs tworzenia stron www na Udemy, jestem w trakcie kursu Java Script. Świetnie przygotowane materiały i dobrze przemyślana struktura kursów i naprawdę są w moim odczuciu uaktualniane. Podobnie jak ten materiał w związku ze zmianami w sass. I widać pasję i oddanie. Jak ktoś napisał klasa jak zawsze! Wielkie dzięki!
Cieszę się, że kursy się podobają. 🙂
Natomiast polecam iść po kolei, tak jak mapa pokazuje mmcschool.pl/#map
Wtedy nauczysz się wszystkiego, co potrzebne do tworzenia profesjonalnych stron. 👍
Tu nie ma drogi na skróty, tu nie da się skakać z tematu na temat.
Szef z kamerką 😎, świetny materiał!
Dzieki wielkie za wytłumaczenie 💪
Świetny kanał. Myślę, że pierwsze 100 tyś. subskrybentów to tylko kwestia czasu 😉
Tak do paździerlipca się wyrobimy. 😎
@@MMCSchool_WWW kursy są sztosem, wiec nic dziwnego! :D
Klasa jak zawsze :)
Jak to się ma do mixinow?
Gulp tez ostatnio był updejtowany w 2019 roku. Z jednego przestarzałego narzędzia do drugiego przestarzałego narzędzia.
Gulp to tylko Gulp. To wtyczki są najważniejsze i one są aktualne. 😉 I co jest drugim "przestarzałym narzędziem"? SASS? 👀
@@MMCSchool_WWW Zapewne chodziło o wtyczkę live sass compiler.
@@eRRoRuśś ta wtyczka w VS Code jest od bardzo dawna aktualna. 👍
@@MMCSchool_WWW A domyślam się :D ale chyba o to chodziło temu Panu, ja używam webstorm'a to tam file watcher działa.
cześć Majek mam pytanko jak się nazywa dokładnie ta wtyczka której użyłeś w materiale ?
mmcschool.pl/faq/ punkt 1 w sekcji WWW. 😉
dzięki
@@MMCSchool_WWW
Majek mam pytanko, jestem w 3cz kursu, czyli przy projektach już zacząć używać use ? I zaprzestać użytkowania importa?
Zaczekaj z tym do cz. 4. 😉
Tak jak pisałem na Discordzie:
Wtyczka SASS Compiler w VS Code nie obsługuje nowszych alternatyw importu, a więc @use oraz @forward. Do ich obsługi potrzebny nam bundler (np. Gulp), którego poznajemy dopiero w cz. 4.
Zasada działania jest praktycznie identyczna, więc w cz. 2 i cz. 3 nadal będziemy dla ułatwienia korzystać z @import, natomiast w cz. 4 przypomnę Wam o odcinku na YT i nie będziecie mieć najmniejszych problemów z adaptacją nowego zapisu. 😉
Co jest nie tak z @import?
Problemy mogą pojawić się przy ogromnych projektach, nad którymi pracuje kilka osób. Wtedy @import gorzej radzi sobie wydajnościowo + mogą powstać błędy typu 2x zadeklarowana ta sama zmienna.
Nie są to więc rzeczy, którymi musimy się martwić na poziomie cz. 2 i cz. 3. 🙂
@@MMCSchool_WWW jasne! w takim razio wsio.. zaczynam kurs js dziś :D
Mateusz a kiedy w końcu kurs Reacta? :-)
Premiera planowana na 35 paździerlipca tego roku... 😜
@@MMCSchool_WWW czyli rozumiem że nigdy 🤔😎
@Majek użycie "use" jest klarowne, ale te forwardy i _index.scss już nie do końca.
Case study:
W katalogu "components" mamy plik _index.scss, w którym jest forward dwóch plików: _colors1.scss i _colors2.scss. Załóżmy, że oba te pliki mają identycznie nazwaną zmienną: $niebieski. W pierwszym pliku (_colors1.scss) pod tą zmienną jest wartość "blue", a w drugim pliku (_colors2.scss) jest wartość "cadetblue".
Następnie w pliku _style.scss używamy dyrektywy "@use 'components'".
Jaki będzie kolor jeżeli w pliku _style.scss napiszę: color: $niebieski? blue czy cadetblue i dlaczego?
Sprawdź. 😉
@@MMCSchool_WWW Otrzymałem error "Two forwarded modules both define a variable named $color.".
Czy zatem dobrze rozumiem, że pliki scss, które są "scalane" poprzez forward kategorycznie nie mogą zawierać identycznych nazw zmiennych, funkcji, mixinów?
@@coder_one dokładnie, problem z @import rozwiązany. 👌
@@MMCSchool_WWW Miałem dokładnie te same wątpliwości. Np.
1. Skoro @forward scala wszystkie scss ze sobą, przez co nie można używać zmiennych z identyczną nazwą, to @forward, jest tak naprawdę @import'em, który upiększa nam górne linijki kodu zabierając je do innego pliku.
2. Dlaczego _index.scss jest w utilities? Czy można go umieścić folder wyżej w ./sass i stamtąd pobierać?
3. Czy można mieć wiele _index.scss np. w folderze ./scss, w ./scss/utilities oraz w ./scss/components?
Skad wziac ten plik gulpfile.js?
Trzeba go sobie skonfigurować, w zależności od potrzeb.
Gulpa przerabiamy w tym kursie jak coś: mmcschool.pl/kursy/kurs-tworzenia-stron-www-cz-4.html 👍