Zapisując arkusze stylów CSS, musisz zauważyć, że często musisz zapisać pewne szczególne wartości, takie jak kolor różnych elementów. Dlatego, aby uniknąć tego CSS, pozwala użytkownikom zadeklarować zmienne dla niektórych wartości CSS i używać ich w kodzie zamiast spowalniającego wartości w kółko. Zmienne te są określane jako zmienne CSS, które omówiliśmy dogłębnie w tym zapisie. Tematy omawiane w tym poście są następujące.

1. Zmienne w CSS
2. Zalety korzystania z zmiennych CSS
3. Deklarowanie globalnych i lokalnych zmiennych CSS
4. Wartości awarii
5. Nadrzędne zmienne w CSS

Zmienne w CSS

CSS pozwala użytkownikom tworzyć niestandardowe właściwości, które składają się z określonych nazw i wartości, które są określane jako zmienne CSS. Te zmienne, gdy zadeklarowane mogą być używane w razie potrzeby w dokumencie.

Aby ogłosić te zmienne, musisz przestrzegać określonego zestawu zasad:

• Pierwszym z nich jest to, że nazwa niestandardowej właściwości lub zmiennej CSS musi rozpocząć się od podwójnych łączących.
• Są one również wrażliwe na przypadki, więc należy zachować szczególną ostrożność.

Oto jak nazwać te zmienne.

--Kolor tekstowy: niebieski;

Aby uzyskać dostęp do tych zmiennych w twoich arkuszach stylu, używana jest funkcja var () w CSS. Oto jak używasz funkcji var ().

var (-kolor tekstu);

Zalety korzystania z zmiennych CSS

Poniżej wspomnieliśmy o pewnych zaletach stosowania zmiennych w CSS.

1. Kiedy budujesz bardzo skomplikowaną stronę internetową, zauważysz, że twoje wartości CSS będą powtarzające się zbyt często. Dlatego, aby uniknąć zapisywania tych samych wartości wiele razy, możesz wygenerować zmienną CSS. Zmienne te są przechowywane w jednym miejscu i można uzyskać do nich dostęp w dowolnym miejscu w pliku.
2. Kolejną zaletą zmiennych CSS lub niestandardowych właściwości jest to, że są one łatwe do zrozumienia, ponieważ są one zadeklarowane przez samych programistów. Na przykład -Text Color jest znacznie bardziej zrozumiały niż #0000ff.

Deklarowanie globalnych i lokalnych zmiennych CSS

Reguły CSS twierdzą, że zmienne CSS mają zakres lokalny lub globalny. Zmienną z zakresem globalnego można użyć tam, gdzie jest to wymagane w całym dokumencie. Tymczasem zmienną z lokalnym zakresem może być pobierana tylko przez selektor, w którym jest zdefiniowany.

W celu utworzenia zmiennej globalnej za pomocą funkcji var (. W międzyczasie zmienna lokalna może być tworzona w dowolnym selektorze.

Składnia

Dla zmiennych o globalnym zakresie.

:źródło
--Główne padanie: 5px

Składnia stwierdza, że ​​każdy element, który uzyskuje dostęp do zmiennej -padania za pośrednictwem funkcji var (.

Dla zmiennych z lokalnym zakresem.

P
--kolor główny: brązowy;
Kolor:--main-text-color;

Teraz możemy użyć zmiennej „-main-text-wbół” w selektorze „P” lokalnie i mieć brązowy kolor.

Przykład 1

Załóżmy, że chcesz użyć funkcji var (), deklarując zmienne globalne.

Html

To jest akapit.

W powyższym fragmencie kodu po prostu utworzyliśmy kontener DIV i zagnieżdżliśmy

element wewnątrz tego kontenera Div.

CSS

:źródło
--różowy: #ffc0cb;
--Brown: #964B00;
--Niebieski: #0000ff;

div
kolor: var (-niebieski);
kolor tła: var (-biały);
Wyściółka: 15px;

H1
kolor tła: var (-biały);
kolor: var (-niebieski);
granica: 3px solid var (-brązowy);
Wyściółka: 40px;

W powyższym kodzie zdefiniowaliśmy niektóre zmienne globalne w: selektor root, każdy odpowiadający określonemu kolorowi. Następnie używamy tych globalnych zmiennych w całym dokumencie, jeśli jest to wymagane za pomocą funkcji var (). Zaletą tworzenia tych zmiennych globalnych, a następnie używania ich w funkcji var () jest to, że w tym konkretnym przypadku nie musisz definiować kolorów elementów w kółko, zamiast tego po prostu użyj funkcji var ().

Wyjście

Funkcja var () działa poprawnie.

Przykład 2
W poniższym przykładzie wykazaliśmy, jak deklarować i wykorzystywać zarówno globalne, jak i lokalne zmienne CSS.

Html

To jest nagłówek.

To jest akapit.

Tutaj po prostu stworzyliśmy pojemnik DIV i zagnieżdżliśmy nagłówek i akapit w nim.

CSS

:źródło
--różowy: #ffc0cb;
--Brown: #964B00;
--Niebieski: #0000ff;

div
kolor: var (-niebieski);
kolor tła: var (-różowy);
Wyściółka: 15px;

H1
kolor tła: var (-biały);
kolor: var (-niebieski);
granica: 3px solid var (-brązowy);
Wyściółka: 40px;

P
--Purple: #6A0dad;
kolor: var (-fioletowy);
granica: 2px solid var (-brązowy);
Rozmiar czcionki: 16px;
Wyściółka: 20px;

W powyższym kodzie utworzyliśmy niektóre zmienne globalne w selektorze: root, a później używając ich za pomocą funkcji var () w całym dokumencie, aby stylizować nasze elementy. Tymczasem, jeśli zauważysz to w P Selektor, stworzyliśmy zmienną lokalną według nazwy -PURPLE, aby zapewnić fioletowy kolor tylko akapit. Do tej zmiennej lokalnej można uzyskać tylko przez selektor, w którym jest zadeklarowana.

Wyjście

Akapit otrzymał fioletowy kolor pomyślnie za pomocą zmiennej lokalnej.

Wartości awarii

Wartości awarii są uważane za substytuty, gdy chcesz uzyskać dostęp do zmiennej CSS za pomocą funkcji var (), deklaracja zmiennej jest nieprawidłowa lub jeśli zmienna nie jest jeszcze zadeklarowana. Są one również przydatne podczas korzystania z niestandardowych elementów lub Shadow Dom.

W celu ogłoszenia wartości awarii musisz przestrzegać określonego zestawu reguł, o których wspominaliśmy tutaj.

1. Pierwszy parametr przekazany do funkcji var (.
2. Drugi parametr przekazany do funkcji powinien być wartością awarii, która będzie działać jako substytut nieprawidłowej właściwości dostosowanej.

Oto przykład.

div
kolor: var (-kolor tekstu, czerwony);

Powyższy fragment kodu określa, że ​​używa czerwonego koloru, który jest wartością oddechu jako substytut koloru tekstu, jeśli -Text Color nie jest zadeklarowany.

Teraz, gdy zrozumieliśmy, jakie są zmienne w CSS, przejdźmy do naszego następnego tematu.

Nadrzędne zmienne w CSS

Zastąpienie zmiennej jest zjawiskiem, w którym jedna zmienna zastępuje drugą. Teraz, gdy nauczyliśmy się zadeklarować zmienne CSS o zakresie globalnym lub lokalnym, zobaczmy, w jaki sposób możemy zastąpić te zmienne w razie potrzeby.

Przykład

Aby zademonstrować nadrzędną procedurę, używamy powyższego przykładu. Tutaj zmienna lokalna zastąpi zmienną globalną.

CSS

:źródło
--różowy: #ffc0cb;
--Brown: #964B00;
--Niebieski: #0000ff;

div
kolor: var (-niebieski);
kolor tła: var (-różowy);
Wyściółka: 15px;

H1
kolor tła: var (-biały);
kolor: var (-niebieski);
granica: 3px solid var (-brązowy);
Wyściółka: 40px;

P
--Niebieski: #000080;
kolor: var (-niebieski);
granica: 2px solid var (-brązowy);
Rozmiar czcionki: 16px;
Wyściółka: 20px;

W powyższym kodzie zrobiliśmy to, że zadeklarowaliśmy globalną zmienną i wykorzystujemy ją do stylizowania niektórych elementów. Jednak jeśli chodzi o

element chcemy nadać mu inny odcień niebieskiego koloru, więc wewnątrz selektora P definiujemy zmienną lokalną o tej samej nazwie „-blue”, ale ma inną wartość. Dlatego ta zmienna lokalna zastąpi zmienną globalną.

Wyjście

Do akapitu dostarczono kolor granatowy za pomocą zmiennej lokalnej.

Wniosek

CSS pozwala użytkownikom tworzyć niestandardowe właściwości, które składają się z określonych nazw i wartości, które są określane jako zmienne CSS. Te zmienne można później używać w całym arkuszu stylów. Ponadto mają one zakres globalny lub zakres lokalny i można je uzyskać za pomocą funkcji var (. Można uniknąć zapisywania powtarzanych wartości CSS, używając tych zmiennych, a także łatwiejsze do zrozumienia. Możliwe jest również zastąpienie ze sobą zmiennych CSS. W tym artykule omówiliśmy zmienne CSS i jak szczegółowo je zastąpić za pomocą różnych przykładów.