CSS: Najpopularniejsze preprocesory CSS

0:00W tej lekcji opowiem ci o różnych

0:02procesorach CSS a jakie mamy dostępne na rynku.

0:05Opowiem tylko o tych najpopularniejszych na pewno jest ich o wiele więcej.

0:08Natomiast takie które jeszcze kilka lat

0:11temu były najbardziej popularne to kolejno SAS czy CSS Les

0:18Bleus przejęć z takimi ja miałem do czynienia najwięcej

0:22prawdopodobnie jest tego więcej ale mówimy tylko T3 więc zacznijmy od CSS a.

0:31Jeżeli wejdziemy na stronę oficjalną sasa No to widzimy że jest to CSS z super

0:38mocami i tutaj jest wystawiane wszystkie informacje na temat tego procesora jak on

0:44działa jakie ma funkcjonalności i jak z niego korzystać.

0:48Generalnie większość z tych procesorów

0:51różni się jedynie składają ich funkcjonalność jest mniej więcej pokryta.

0:55Oczywiście zależy to też od implementacji pojedynczego procesora więc

1:01jest duża szansa że będziecie musieli pracować w projekcie

1:06gdzie wymagany jest SAS a A.W. preferuje Lisa albo odwrotnie gdzie.

1:12Projektem.

1:14Standardowym dla tego jest na przykład procesor less A.

1:21Preferuje cię Sasa bądź Stay plus a więc jakby nie ma tutaj konieczności uczenia

1:25się każdego z tych procesorów indywidualnie bo po prostu nie

1:30ma sensu jeżeli będziecie mieli potrzebę nauczenia się konkretnego procesora nie

1:34będzie z tym problemu jeżeli poznacie chociaż jeden.

1:37My będziemy tutaj pracowali na no i tutaj możemy sobie przejrzeć jak się

1:41robi różne rzeczy w czasie i każdy z tych framework orków będzie miał swoją osobną

1:46listę z dokumentacją lepszą jedną gorszą tak jak tutaj np.

1:51w czasie mamy opis że Select tory możemy testować czego w samym CS się robić nie

1:58możemy no i nie bylibyśmy w stanie zrobić kropka kontener tutaj nawias klamrą w

2:04środku tego kolejny sektor to normalnie wcale nie jest wspierane.

2:10Jest co prawda zapisane gdzieś tam w

2:12specyfikacji natomiast żadna przeglądarka się nie próbowała jeszcze aresztować

2:18i nie jest to oczywiście na takim etapie żebyśmy mogli to robić negatywnie w samym

2:22czasie dlatego procesory dalej są nam potrzebne.

2:26No i oczywiście jest dużo innych

2:28funkcjonalności więc pierwszy z nich najbardziej popularny.

2:32Według mnie to jest czas

2:34możemy też się przy klikać z powrotem w google i zobaczyć Larsa.

2:40Less ma fajną nazwę bo less CSS oznacza z angielskiego mniej CSS a

2:47gdzie opis brzmi że to jest po prostu CSS który ma dodatkowe funkcjonalności.

2:54Ja zleca troszkę korzystałem na początku mojej przygody z frontem.

2:58Później ze względu na wymagania projektowe rzuciłem się na Sasa.

3:03Nie ma w tym nic złego.

3:04Nie ma tutaj ja nie chcę wchodzić w polemikę i chciałbym żebyśmy

3:10my wszyscy jako community developerów nie

3:12mówili który framework czy który procesor jest lepszy.

3:16Oczywiście niektóre będą miały lepsze

3:18funkcjonalności niż inne ale tak czy siak koniec końców jesteśmy

3:22zmuszeni skorzystać z tego co mamy już w projekcie do którego dołączany z reguły a

3:26nie wrzucać własne preferencje projektowe do całego zespołu deweloperów.

3:34Więc oczywiście Les też ma tutaj.

3:38Swoją dokumentację możemy kliknąć sobie just in class.

3:41Jest tutaj cały proces instalacji wypisany jeżeli jesteście za znajomymi z cudem.

3:46Czy możecie spokojnie skorzystać z lisa co na pewno też rozszerzenia do

3:51konkretnych środowisk deweloperskich takich jak Visual Studio kod

3:55gdzie automatycznie możecie je sobie komplikować nie będzie z tym problemu.

4:00No i możemy tutaj podejrzeć jak z tego newsa korzystać.

4:05Jeżeli klikamy tutaj na funkcjonalny no to

4:07widzimy że możemy nawet tworzyć warunki w sensie że jeżeli dany warunek nie jest

4:13spełniony to jakaś wartość powinna być inaczej ustawiona.

4:17To jest na tyle podobne do zwykłego CSS że możecie to sobie przełożyć do np.

4:23klauzuli Support czyli Finger quiz w

4:26których środku podajemy warunek jako wartość danej

4:31właściwości która musi być wspierana żeby dany blok kodu zaaplikował.

4:36No to możemy takie jawne warunki też robić w lesie i czasie

4:40żeby na przykład wykorzystywać je wewnątrz pętli i generować kod na żywo w locie.

4:45I ostatnim z nich jest luz i luz.

4:50Szczerze mówiąc według mnie.

4:57Różni się przede wszystkim tym że ma bardzo uproszczoną składnia w stosunku do

5:02CSS a tam nie musimy robić większości klamry pośredników.

5:08Nie ma z tym problemu możemy zapisywać naszego CSS nawet w taki sposób.

5:12To jest kwestia preferencji.

5:13Ja nie wiem czy jestem tego

5:15fanem zwłaszcza że koniec końców CSS i tak te klamry tam będzie miał postawione

5:21a tutaj jest też łatwiej popełnić błąd

5:23ponieważ jeżeli ktoś zrobi złe cięcie albo będzie chciał zachęcić bardziej sektory.

5:30To może być problem w plusie ale jeżeli zależy nam na czytelność naszego kodu i

5:35faktycznie nie lubimy klamry średniaków no to luz jest taką opcją która wyróżnia

5:40się spośród dwóch poprzedników o których już wspomniałem.

5:43No i tutaj mamy też ładną dokumentację która mówi jak korzystać z

5:48USA jak deklarować zmienne jak tworzyć funkcje itd itd.

5:53To co robią jeszcze te wszystkie procesory

5:55to jest oczywiście tworzenie jakby bundle z całego naszego kodu więc do tej pory

6:02bardzo często korzystaliśmy z jednego pliku CSS który.

6:07Był wysyłany do przeglądarki dokładnie

6:10takim samym w formie w jakiej go pisaliśmy.

6:12Natomiast tutaj przy pomocy procesorów możemy sobie rozbić na mniejsze pliki

6:17dynamicznie je doładować i koniec końców ten procesor niekoniecznie tylko staje.

6:22Każdy z procesorów stworzy nam jeden plik dźwiękowy który prawdopodobnie będzie też

6:27zainfekowany pozbawiony wszystkich tych dodatkowych znaków które nie są wymagane.

6:33Do tego aby negatywny sens został poprawnie zinterpretowane przez

6:37przeglądarkę no i dużo dodatkowych opcji może też robić tak jak np.

6:41wspomniane wcześniej auto.

6:43Refleksja my w dalszej części kursu będziemy skonfigurować i korzystali z

6:48składni CSS czyli najpierw pokaże jak skonfigurować własne środowisko pracy żeby

6:54móc korzystać z CSS a a potem omówienie jego najważniejsze

6:59funkcje które tak naprawdę są publikowane przez.

7:03Alternatywne rozwiązania takie jak Les plus funkcje zmienne pętle itd itd.

7:11To wszystko mówimy w kolejnych częściach tego kursu.