CSS: Pętle

0:00Część tej lekcji opowiem ci pętla w sensie pętla to jest taka

0:04taki konstruktor generalnie znany z różnych języków programowania i to

0:08jest taka podstawa tak naprawdę całego oprogramowania razem z

0:11warunkami pętle i warunki to jest coś co pozwala nam tak naprawdę programowe.

0:18No i dzięki temu możemy do pewnego stopnia programowania.

0:22Ja nie jestem np.

0:23wielkim zwolennikiem i w czasie natomiast na pewno są jakieś funkcje które

0:27są w stanie nam uprościć życie które tam potrzebą jakichś warunków.

0:32Ale chciałem opowiedzieć konkretnie o

0:34pętli bo pętlę według mnie mają więcej konkretnie takich zastosowań

0:39przydatnych przynajmniej w tych prostszych przypadkach.

0:42Więc najprostszą pętlą

0:44w każdym języku programowania jest pętla for no i jej składnia wygląda na takiej

0:50zasadzie że piszemy sobie fora z małpą na przodzie.

0:53Następnie podajemy nazwę zmiennej którą my

0:56deklarujemy czyli ta pętla for będzie zwiększała wartość tej zmiennej.

1:00Przy każdej interakcji literackiej czyli jakby przebiegu tej funkcji.

1:05No i generalnie musimy podać zakres między którym ta pętla będzie się.

1:13Wykonywać czyli Jeżeli podamy tutaj from powiedzmy 1.

1:206.

1:21To wtedy.

1:23Ta zmienna jak indeks czyli z angielskiego jest to zakładka to jest taki też

1:30powszechny termin nazywania zmiennych w piętrach

1:35będzie miała wartość od jednego do 6.

1:37I ten kod który tutaj piszemy czyli w

1:39naszym przypadku oczywiście będą to sale ktory będzie miał.

1:43Tą zmienną dynamicznie ustawioną i stworzy nam się 6 bloków faktycznego kodu CSS więc

1:49jeśli zobaczymy jak wygląda nasza marka jest tutaj lista nie numerowane a.

1:55Która ma w sobie sześć elementów.

1:57Oczywiście moglibyśmy jakoś to zrobić dynamicznie.

1:59żeby nie trzeba było tutaj Hart hodować tej szóstki.

2:02No ale powiedzmy że zostawiłem to w ten sposób.

2:05No i po prostu chcemy oscylować te batony żeby miały jakiś inny kolor.

2:09Z każdym następnym elementem chcemy ten kolor dynamicznie generować.

2:14Czyli jeśli sobie stworzymy tutaj wewnątrz naszej walki

2:19zbierzemy wszystkie

2:22elementy listy i zbierzemy Bilda za pomocą tej zmiennej

2:29czyli tutaj wystawimy sobie i nie musimy użyć tutaj interpelacji żeby nam

2:33to zadziałało i teraz chcemy oscylować Bacon który jest wewnątrz tego elementu

2:37listy czyli najpierw zbieramy walki wszystkie I TU JEST TYLKO JEDNA WIELKA.

2:42Potem szukamy

2:44elementu listy i wewnątrz każdego elementu listy jest baton i to po prostu nam sprawi

2:49że każdy z tych elementów będzie miał osobne wersje.

2:53Czyli jeżeli sobie kupujemy to można to zaprezentować na takiej zasadzie że tutaj

2:57przy pierwszym uruchomieniu będzie jedynka.

2:59Przy drugim będzie dwójka itd itd

3:02faktycznie ten kod zostanie wygenerowany i będzie w przeglądarce w takiej formie a my

3:07tutaj w kodzie źródłowym będziemy operowali na takiej farmie.

3:11Czyli jeśli to sobie usiądziemy

3:13no to możemy ustawić jakiś Ground dla tego przycisku co możemy zrobić to tak jak już

3:19wcześniej wspomniałem możemy sobie użyć dynamicznie naszych zmiennych czasowych

3:23Powiedzmy że chcemy ten Yellow Green albo Rebecca Pearl niech będzie Rebecca Hall

3:28dynamicznie modyfikować czy jeśli sobie ustawiamy grunt na Litwie

3:35jako bazę dajemy kolor PRL który sobie

3:38zdefiniował wyżej i mamy do niego dostęp dzięki temu importować tutaj

3:43i podamy sobie wartość powiedzmy 10 proc.

3:47Zobaczymy co się stanie.

3:49Wszystkie są tego samego koloru ponieważ tak naprawdę powtórzył ten sam sektor 6

3:53razy ale treść tego sektora jest identyczna.

3:56Co możemy zrobić to wykorzystać faktycznie

3:58tą zmienną i jest na tyle mądry że możemy mnożyć ze sobą zmienne.

4:03Nawet jeżeli jest 10 proc.

4:05Nawet jeśli to byłoby 10 stopni i jeżeli byśmy robili jakieś obroty co np.

4:10jest przydatne w Ride który też wam pokaże za chwilkę w osobnej karcie

4:16i po zapisie faktycznie widzimy że

4:18każdy następny przycisk jest troszkę jaśniejszy niż poprzedni i tutaj

4:24cała różnica polega na tym że my nie generuje my tych.

4:29Kolorów.

4:30Ręcznie czyli te kolory są dynamicznie ustalane i my tylko na podstawie tych

4:35naszych bazowych kolorów jesteśmy w stanie wygenerować taki można powiedzieć gradient

4:40ale nie jest to faktyczny gradient tylko po prostu indywidualne kolory jak

4:45widzimy tutaj się wygenerowały odpowiedni headset dla kazdego z tych elementów.

4:51I to jest taka podstawowa forma użycia pętli w czasie.

4:56Jest jeszcze stacja.

5:00I czy jesteśmy w stanie sterować po np.

5:04po mapach po listach.

5:06I to może zaprezentuje po prostu w samym

5:09czasie w dokumentacji ja też zachęcam żebyście patrzyli zawsze w dokumentację.

5:13I chciałbym też żebyście po prostu

5:14pamiętali że zawsze dokumentacja będzie najbardziej aktualnym źródłem informacji o

5:20tym jak korzystać z danej biblioteki w tym przypadku oczywiście Sachsa

5:24w związku z czym tutaj możemy zobaczyć przykładowe użycie funkcji.

5:31Czy jesteśmy w stanie tutaj oczywiście

5:33klamry są opcjonalne bo to jest SAS a nie wariat z CSS.

5:38Tutaj

5:39oczywiście klamry są no i generalnie

5:42wygląda to tak że możemy zadeklarować mapę.

5:47To żeby też było.

5:50Będziemy tłumaczyć teraz tutaj.

5:56To dla każdego z tych elementów czyli tutaj mamy klucz.

5:59Tutaj mamy wartość i takich elementów które są rozdzielone odcinkami.

6:03Mamy cztery

6:06dla każdej ikony i tak się to czyta po angielsku.

6:10Nam to są nazwy zmiennych które my sami deklarujemy in Homs czyli dla każdego.

6:17Nazwa gleb jako bo tutaj pracują na kwiatach w tym mapie.

6:24Będzie się nam to generowały.

6:26I tutaj ten napis będzie zastępowany np.

6:29tym aktem.

6:32A wartość oczywiście bez słowa.

6:35A wartość będzie zamieniona na.

6:39F 112 dla każdej teraz oczywiście inny zestaw danych będzie przekazywany

6:44i tego typu rzeczy można wykorzystać albo tak jak ja pokazałem do Gradient.

6:50Oczywiście to nie będzie działało bo nie mamy żadnych koników

6:54w tym momencie załadowany ale zostawię to tylko jako referencje naszego kodu.

7:00Można to wykorzystać na przykład do robienia radia mini.

7:04Jak sobie piszemy medialni CSS.

7:08To tutaj jest jako serce.

7:12Mamy całą listę ciekawych przykładów jak

7:15mogą takie mniej wyglądać i najłatwiej się je robi przy pomocy S CSS a ponieważ mamy

7:20dostęp do tych pętli i takie efekty zrobić w samym CSS jest naprawdę trudno.

7:25Ale dzięki temu że mamy tutaj dynamiczne generowanie naszego kodu

7:29to przy każdej teraz te wartości mogą być inne i możemy sprawić że kolejny element

7:36w naszym radio albo tonie właśnie taki miałem na myśli będzie miał inny.

7:41Kąt nachylenia czyli powiedzmy tutaj ten element miałby kąt nachylenia 0.

7:48Kolejny element miałby tam kąt nachylenia

7:50360 podzielić przez liczbę elementów którą tutaj mamy.

7:54I to by się tak prezentowało żeby

7:56móc taki element pokazywać dynamicznie przy pomocy drzewa skryptu czy przy pomocy

8:01jakiegoś Hoover czy innego pseudo elementu.

8:06Więc to są pętle w kontekście Sasa i dzięki nim będziecie mogli stworzyć

8:12naprawdę dynamiczne bloki kodu w zależności od Waszych potrzeb.