Die VAR -Funktion in CSS | Erklärt

Die VAR -Funktion in CSS | Erklärt
CSS ist eine Stylingsprache, die aus vielen Unterscheidungsmerkmalen besteht. Ein solches Merkmal ist, dass es seinen Benutzern ermöglicht, maßgeschneiderte Eigenschaften zu deklarieren, die auch als CSS. Diese Variablen bestehen aus spezifischen Namen und Werten, und sobald diese deklariert werden, können diese überall in der Datei verwendet werden. Um diese Variablen zu verwenden, liefert CSS eine Funktion des Namens var (), die wir in diesem Artikel ausführlich besprechen werden. Dieser Beitrag enthält die folgenden Themen.

1. var () Funktion

2. Vorteile der Funktion var ()

Die var () -Funktion in CSS

Zum Zwecke der Einbeziehung einer individuellen Eigenschaft oder einer CSS -Variablen, die an anderer Stelle im Stilblatt verwendet werden kann, wird die Funktion var () verwendet.

Syntax

var () = var (-Property Name, Eigenschaftswert)

Parameter erklärt

Name des Anwesens: Gibt den Namen der angepassten Eigenschaft an. Es ist ein erforderlicher Parameter.

Eigentumswert: Gibt den Wert der maßgeschneiderten Eigenschaft an. Es ist ein optionaler Parameter.

Punkte, die man sich merken sollte!

1. CSS -Regeln definieren, dass die CSS -Variablen entweder einen lokalen oder einen globalen Bereich haben. Eine globale Variable kann überall im gesamten Dokument verwendet werden. In der Zwischenzeit kann eine lokale Variable nur vom Selektor abgerufen werden, in dem sie definiert ist.

2. Zum Zweck der Erstellung einer globalen Variablen mit der Funktion var () muss sie im Root -Selektor deklariert werden

3. In der Zwischenzeit kann in jedem Selektor eine lokale Variable erstellt werden.

Beispiel 1

Angenommen, Sie möchten die Funktion var () verwenden, während Sie globale Variablen deklarieren.

Html


Dies ist ein Absatz.


Im obigen Code -Snippet haben wir einfach einen DIV -Container erstellt und a

Element in diesem Div -Behälter.

CSS

:Wurzel
--Pink: #ffc0cb;
--Weiß: #ffffff;
--Brown: #964b00;
--Blau: #0000ff;

Körper
Hintergrundfarbe: var (-pink);

div
Farbe: var (-blau);
Hintergrundfarbe: var (-weiß);
Polsterung: 15px;

P
Hintergrundfarbe: var (-weiß);
Farbe: var (-blau);
Grenze: 3px fest Var (-Brown);
Polsterung: 40px;

Im obigen Code haben wir einige globale Variablen in der: Stammwahl jeweils einer bestimmten Farbe definiert, die jeweils einer bestimmten Farbe entsprechen. Anschließend verwenden wir diese globalen Variablen im gesamten Dokument, sofern dies mit der Funktion var () verwendet wird. Der Vorteil, diese globalen Variablen herzustellen und sie dann in der Funktion var () zu verwenden, besteht darin, dass Sie in diesem speziellen Fall nicht immer wieder Farben von Elementen definieren müssen, sondern nur die Funktion var () verwenden.

Ausgang

Die Funktion var () funktioniert ordnungsgemäß.

Beispiel 2

Verstehen wir die Funktion var () mit einem anderen Beispiel weiter.

Html

Gib deinen Namen ein:



Geben Sie Ihren Kontakt ein:



Geben sie ihre E-Mail Adresse ein: