Funkcja VAR w CSS | Wyjaśnione

CSS jest językiem stylizacji, który składa się z wielu cech wyróżniających. Jedną z takich cech jest to, że pozwala użytkownikom deklarować niestandardowe właściwości, które są również określane jako zmienne CSS. Zmienne te składają się z określonych nazw i wartości, a po zadeklarowaniu można je używać w dowolnym miejscu w pliku. Aby użyć tych zmiennych, CSS zapewnia funkcję według funkcji nazwy var (. Ten post zawiera następujące tematy.

1. funkcja var ()

2. Zalety funkcji var ()

Funkcja var () w CSS

W celu włączenia niestandardowej właściwości lub zmiennej CSS, która może być używana w innym miejscu w arkuszu stylów, używana jest funkcja var (.

Składnia

var () = var (-nazwa property, wartość właściwości)

Wyjaśnione parametry

Nazwa właściwości: Określa nazwę niestandardowej właściwości. Jest to wymagany parametr.

Wartość nieruchomości: Określa wartość dostosowanej właściwości. Jest to opcjonalny parametr.

Punkty do zapamiętania!

1. Reguły CSS określają, że zmienne CSS mają zakres lokalny lub globalny. Zmienną globalną może być używana w dowolnym miejscu w całym dokumencie; Tymczasem zmienną lokalną można pobrać tylko przez selektor, w którym jest zdefiniowana.

2. W celu utworzenia zmiennej globalnej za pomocą funkcji var (

3. W międzyczasie zmienna lokalna może być tworzona w dowolnym selektorze.

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żono

element wewnątrz tego kontenera Div.

CSS

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

ciało
kolor tła: var (-różowy);

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

P
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żywać funkcji var ().

Wyjście

Funkcja var () działa poprawnie.

Przykład 2

Zrozum funkcję var () z innym przykładem.

Html

Wpisz swoje imię:



Wprowadź swój kontakt:



Wprowadź swój email:



Składać

Tutaj utworzyliśmy trzy pola wejściowe i przycisk.

CSS

:źródło
--Kolor główny: różowy;
--kolor główny: niebieski;
--Główne padanie: 5px;

.Input1
kolor tła: var (-główny kolor BG);
kolor: var (-kolor główny);
Wyściółka: var (-padanie główne);

.Input2
kolor tła: var (-główny kolor BG);
kolor: var (-kolor główny);
Wyściółka: var (-padanie główne);

.Input3
kolor tła: var (-główny kolor BG);
kolor: var (-kolor główny);
Wyściółka: var (-padanie główne);

przycisk
kolor tła: var (-główny kolor BG);
kolor: var (-kolor główny);
Wyściółka: var (-padanie główne);

W powyższym kodzie deklarujemy trzy zmienne globalne: jedna dla koloru tła, jedna dla koloru tekstu, a ostatnia dla wyściółki. Następnie używamy tych trzech globalnych zmiennych do stylizacji naszych pól wejściowych i przycisków.

Wyjście

Funkcja var () działa poprawnie.

Notatka: Pamiętaj, że właściwości CSS zdefiniowane przez użytkownika są wrażliwe na literę, a nazwa właściwości musi rozpocząć się od podwójnych łączników.

Zalety funkcji var ()

Istnieje wiele oczywistych zalet korzystania z funkcji var (). Wymieniliśmy niektóre z nich poniżej.

1. To sprawia, że ​​brakowalność i czytelność kodu jest bardziej jasna.

2. Jak pokazano w powyższych przykładach, ułatwia używanie właściwości kolorów.

Wniosek

Funkcja var () pozwala zdefiniować dostosowaną właściwość lub zmienną CSS, która może być używana gdzie indziej w arkuszu stylów po ogłoszeniu. Możesz zadeklarować zmienną globalną w selektorze: root i użyć jej w całym dokumencie za pomocą funkcji var (), ponadto możesz również utworzyć zmienną lokalną wewnątrz określonego selektora, a następnie użyć jej za pośrednictwem funkcji var (). Musisz określić niestandardową nazwę właściwości lub zmienną CSS, począwszy od podwójnych łączników, a także są one wrażliwe na wielkość, więc należy zachować szczególną ostrożność. W tym poście szczegółowo omawia funkcję var () w CSS wraz z wykazaniem niektórych istotnych przykładów.