CSS: Zmienne

0:00W tym dziale będziemy mówili o stresie i konkretnych jego funkcjonalność.

0:05W poprzednim o mówiliśmy faktycznie jak

0:07skonfigurować to i ja tutaj w tych przykładach następnych będę korzystał

0:11naprzemiennie z portfela czy chłopaka w zależności od tego który narzędzie

0:16będzie lepiej mi działało na konkretne przykłady.

0:19No i w tej konkretnej lekcji mówimy zmienne Już umówiliśmy zmienne w

0:24kontekście CSS a raczej CSS Custom Properties no i SAS też ma w sobie zmienne

0:30bo tak jak wspominałem przed tym gdy Custom Properties weszły w obieg

0:36faktycznie przeglądarek musieliśmy jakoś sobie je symulować pracować po prostu na

0:42zmiennych w kontekście CSS i SAS czy inne procesory nam na to pozwalały.

0:47W związku z czym ja tutaj stworzyłem sobie takie drzewo katalogów

0:51w katalogu serce mamy wszystkie nasze pliki źródłowe no i wewnątrz tego katalogu

0:56jest katalog z CSS są tutaj trzy pliki indeks CSS to jest to

1:02co tutaj widzicie na ekranie i w nim importuje za pomocą słowa

1:07kluczowego import plik z naszymi zmiennymi w tym pliku.

1:11Nie dzieje się tak naprawdę nic poza samą deklaracją tych zmiennych

1:14i zmienne w sensie deklarujemy za pomocą dolara nazwa zmiennej czyli.

1:21Warner może to być Kammel ale może to być

1:24dasz kasę może być z kasy to nie ma znaczenia.

1:26CSS jest naprawdę elastyczny w tym

1:28kontekście i tak samo jak w zwykłym CSS nie podajemy wartość

1:33właściwości po 2 kroku czyli jeżeli tutaj piszemy np.

1:37light no to moglibyśmy to nazwać jako Sea wait see jak kolor.

1:42Gdy przejdziemy do.

1:45Pliku CSS.

1:47No to widzimy że dalej korzystamy z kasą Properties.

1:51Z tym że przekazujemy te zmienne które zadeklarowali w pliku vario bus.

1:57Tutaj ten plik ma jeszcze Anders przed sobą.

1:59To jest taka konwencja.

2:02Ja ją pamiętam jeszcze z Ga-Pa gdzie po

2:04prostu tak wykrywane były pliki które nie powinny być domyślnie handlowano.

2:10Czyli tutaj ten indeks CSS on nam się domyślnie z bandą czuje do pliku Index

2:15kropka CSS jeżeli mamy takie pliki pomocnicze które nie chcielibyśmy żeby

2:19tworzyły się jako osobne vario bus kropka CSS

2:24które tak czy siak byłoby pustym plikiem ponieważ tutaj nie ma żadnych reguł są

2:28tylko zmienne które po kompilacji w przeglądarce nie istnieją.

2:34No to to jest taka konwencja tychsporów.

2:38Warto tutaj nadmienić że też wszystko co

2:40zostało za importowane przynajmniej w przypadku Kappa

2:44może zostać napisane.

2:46Czyli jeśli mielibyśmy kilka.

2:48Plików w których podawali byśmy sobie

2:50tutaj te zmienne ale tutaj napiszemy to see.

2:55Obręcz na jakieś inne wariacje koloru pomarańczowego.

3:02No to faktycznie w całym pliku.

3:05Od tej linijki ten kolor będzie już inny.

3:09To jest bardzo częsty problem jeżeli faktycznie korzystamy z Gallupa żeby

3:12połączyć kilka różnych plików źródłowych nie stworzymy sobie lokalnej zmiennej.

3:16Te zmienne można sobie odpisywać z tego co

3:19pamiętam lokalnie czyli jesteśmy w stanie tutaj zmienić sobie wartość

3:25dla sieci Orange natomiast nie będzie to miało znaczenia ponieważ ta zmienna jest

3:30użyta dopiero wróciła więc generalnie da się robić zmienne lokalne.

3:35I ja do tego też często zachęcam ponieważ

3:37jeżeli mamy sytuację że chcielibyśmy zadeklarować że jeden ma tutaj

3:43powiedzmy 10 rozmów to też ma 10 rozmów.

3:48Jak to napiszemy to faktycznie teraz to

3:50jest większe i Naszą intencją jest to żeby te

3:55osie były równe żeby wysokość i szerokość była równa.

3:58No to możemy do tego użyć zmiennej i napisać sobie.

4:05Saints i wpisać tutaj 10 rozmów oczywiście zmienne mogą przyjmować nie tylko kolory.

4:12Mogą to być funkcje mogą to być tak

4:14naprawdę wszystko co normalnie przyjmuje i możemy tutaj użyć tych slajdów

4:20i dzięki temu mamy pewność że gdy zmienimy to w jednym miejscu

4:24to to się zapisuje do całego elementu czyli tak naprawdę pozbywa się tej

4:29aplikacji kodu i konieczności powtarzania różnych wartości dla różnych właściwości.

4:37W związku z czym zmienne lokalne też istnieją i jeśli to jeszcze wrócimy.

4:46Pięć kremów.

4:49I tutaj to piszemy na.

4:52Naszą zmienną to tutaj już ta zmienna

4:56istnieć nie będzie nie będziemy mieli do niej dostępu w innych sektorach

4:59tylko generalnie w tym bloku w którym ją zadeklarowali.

5:04Więc to możemy tak zostawić tylko zmieńmy może nazwę tego War na.

5:10Custom Six.

5:14Przejdźmy dalej. Generalnie co można z tym zrobić

5:18bo generalnie nie widać tutaj za dużo benefitów tym że korzystamy ze zmiennych

5:22czasowych w kontekście tego że mamy już zmienne losowe

5:26natomiast może to być przydatne jeśli chcielibyśmy być bardziej wymowny w

5:31kontekście naszego kodu i zadeklarować sobie np.

5:34kolory primary.

5:37Tutaj wstawił po prostu powiedzmy obręcz nasz.

5:43Sekunda gry

5:45jako Green nie jest to na pewno paleta kolorów której powinniście używać

5:50na waszych stronach www bo nie jest ona

5:52dostosowana w kontekście tego co powinno się wyświetlać.

6:00I możemy jeszcze zrobić primary liter.

6:07Orange Second sekunda liter.

6:15Are.

6:17Ofiary liter i do czego to się może przydać.

6:20Oczywiście wykorzystujemy te same zmienne więc to nie ma za dużo sensu ale jeśli

6:24przejdziemy do vario bus CSS i stworzymy sobie z Orange liter.

6:32Jesteśmy w stanie wykorzystać tą zmienną.

6:35Orange.

6:40I użyć tutaj zmiennej.

6:43Life in.

6:46Gdzie podajemy wartość w procentach jeżeli się nie pomyliłem zobaczymy.

6:52Tutaj zrobimy sobie lifting

6:56i jeszcze jesteśmy zmuszeni do korzystania w niektórych miejscach.

6:59Generalnie jesteśmy zmuszeni do korzystania z tzw.

7:02interpelacji interpelacji a to jest po

7:05prostu mechanizm który jakby uruchomi wyrażenie czasowe czyli w

7:09tym momencie po prostu wyświetli zmienną i wstrzymanie to do naszego CSS.

7:14Dokładnie w ten sam sposób jak to wygląda

7:17a zmienne przekazywane w ten sposób byłyby usunięte i byśmy mieli.

7:22Możemy to pokazać też Jeżeli usuwamy tą interpelację to kolory

7:26znikną a kolory znikną przede wszystkim dlatego bo tutaj ustawiamy go na.

7:36SIM Orange czyli tutaj się strzeliła nam

7:39zmienna czasowa z tym dolarem co oczywiście nie jest prawidłowym kolorem i

7:42dlatego to nie działa i dlatego tę interpelację tutaj musimy rozstrzygnąć.

7:48Więc jeśli tutaj wystawimy liter liter do primary liter.

7:58To jesteśmy w stanie jeżeli nie popełniłem żadnego błędu

8:03primary liter.

8:05Piszemy popełniłem jakiś błąd podejrzewam

8:09że to może nie jest zapisane po prostu zapisz mnie jeszcze raz.

8:14Przejdźmy do dokumentacji Sasa bo to jest najlepszy sposób jakie tam są dostępne

8:17funkcje o funkcjach oczywiście też będę mówił jak tworzyć własne funkcje.

8:23Powinno to być

8:25targ.

8:31I to przyjmuje faktycznie wartości procentowe Zobaczmy o co chodzi tutaj.

8:38Primary.

8:43Zobaczymy jaka jest wartość rzucona Custom Properties.

8:50Litera A. Oczywiście nie zrobiłem interpelacji tak

8:53jak mówiłem o interpelacji tej interpelacji nie zrobiłem.

8:57I tutaj dostaliśmy błąd.

9:02Odświeżony.

9:04Co jest problemem.

9:06Tak interpelacje robimy

9:08dolarem

9:10piszemy wierzymy.

9:12Taki faktycznie może to słabo wygląda bo

9:15nie mamy tutaj porównania ale jeśli na przykład zrobimy.

9:22Tutaj primary oczywiście pozostałe

9:24elementy też powinniśmy sobie tutaj nastawić w taki sposób ale tutaj też było

9:30powiedzmy

9:32liter.

9:34Tego oczywiście nie będę robił ale

9:35zachęcam do tego żebyś przetestował to rozwiązanie.

9:40Pierwsze

9:41liter

9:43napiszemy jeszcze raz i może zwiększymy po prostu troszkę coraz jaśniej o 20 proc.

9:49Tutaj musimy odświeżyć.

9:54Liter.

9:57Herb lidera II RP.

10:00Herb.

10:06Nie znajduję tego CSS a zobaczmy o co chodzi.

10:13Brakuje nam.

10:17No i faktycznie jeśli teraz zrobimy coś takiego że na rowerze tego elementu ja

10:22tutaj się odnoszę do toru nadrzędnego o tym będę mówił przy

10:27omówieniu jeżdżenia w klasie i ustawiamy sobie

10:32grunt na wiatr primary liter.

10:37To po pierwsze pozbywa się tutaj mowy o faktycznym kolorze.

10:41Jestem za taką warstwą abstrakcji jak jedziemy na ten element.

10:45No to faktycznie Rosjanie i to jest o tyle fajne że automatycznie możemy modyfikować

10:51naszą paletę kolorów w zależności od potrzeby.

10:54I nie musimy tych kolorów Hart hodować co byłoby uciążliwe.

10:57Jeżeli faktycznie

10:59by się zmienił musielibyśmy zmienić

11:01wszystkie kolory pochodne od tych bazowych razem z nimi.

11:05A tak mamy tutaj dynamiczną wartość dla

11:07tych zmiennych więc osobiście uważam że zmienne

11:12CSS owe dalej są

11:14potrzebne i dalej mają swoje użycie w całym Flower rentowym

11:20i całkiem nieźle działają z pewnymi zmiennymi Custom Properties.

11:25W związku z czym zachęcam do

11:27eksperymentowania w ten sposób no i generalnie jest bardzo dużo technik

11:31jak można sobie ułożyć kolory i zmienne w waszych projektach.

11:35Ale to zostawiam już wam jako potencjalną rzecz do nauki na własną rękę.

11:41W kolejnej lekcji mówimy z Agnieszką.