Was sind CSS -benutzerdefinierte Eigenschaften (Variablen) und wie kann man sie verwenden?

CSS -benutzerdefinierte Attribute (d. H. CSS -Variablen) verbessern die Entwicklungseffizienz durch Speichern und Wiederverwendung von Stilwerten. Zu den Kernverbrauchsmethoden gehören: 1. Verwenden Sie die Variable Name -Syntax, um in: root- oder spezifischen Selektoren zu definieren; 2. Referenzvariablen über die Funktion var (-variabler Name, Standardwert); 3. kann dynamisch Variablenwerte aktualisieren, Themenschaltungen, reaktionsschnelles Design und andere Szenarien unterstützen. Ihre Vererbungs- und Kaskadenregeln stimmen mit den normalen CSS -Eigenschaften überein und können über JavaScript -Laufzeit geändert werden, um Benutzerpräferenzen oder dynamische Stilanpassungen zu erreichen.

CSS -benutzerdefinierte Eigenschaften, die häufig als CSS -Variablen bezeichnet werden, sind eine Möglichkeit, Werte in Ihrem Stylesheet zu speichern und wiederzuverwenden. Sie erleichtern es, Themen zu verwalten, die Konsistenz aufrechtzuerhalten und die Wiederholung zu verringern. Im Gegensatz zu herkömmlichen CSS, bei denen Sie mehrmals dieselbe Farbe oder einen Schriftartwert wiederholen mussten, können Sie diese benutzerdefinierten Eigenschaften einmal definieren und überall verwenden.

So definieren Sie CSS -benutzerdefinierte Eigenschaften

Sie definieren benutzerdefinierte Eigenschaften mithilfe einer speziellen Syntax: Sie beginnen immer mit zwei Strichen ( -- ), gefolgt von einem Namen Ihrer Wahl. Diese Eigenschaften sind skopiert, was bedeutet, wo Sie sie definieren, wo sie verwendet werden können.

Zum Beispiel:

 :Wurzel {
  -Primary-Color: #007BFF;
  -FONT-Größe: 16px;
}

Hier definieren wir zwei Variablen im Inneren :root , wodurch sie im gesamten Dokument global verfügbar sind. Sie können auch Variablen für spezifischere Selektoren definieren, wenn Sie möchten, dass sie nur in bestimmten Teilen der Seite angewendet werden.

Ein paar Dinge, die Sie beachten sollten:

• Variablennamen sind fallempfindlich, also --color und --Color sind unterschiedlich.
• Sie können ihre Werte über JavaScript- oder Medienabfragen dynamisch aktualisieren.
• Sie kaskaden und erben wie reguläre CSS -Eigenschaften.

So verwenden Sie CSS -Variablen

Sobald Sie definiert sind, können Sie eine benutzerdefinierte Eigenschaft verwenden, indem Sie sie mit der Funktion var() verweisen. Diese Funktion nimmt den variablen Namen und einen optionalen Fallback -Wert auf, wenn die Variable nicht definiert ist.

Beispiel Verwendung:

 Taste {
  Hintergrundfarbe: var (-Primärfarbe);
  Schriftgröße: var (-Schriftgröße, 14px);
}

In diesem Snippet:

• Die Hintergrundfarbe der Schaltfläche verwendet unsere --primary-color .
• Wenn --font-size NICHT irgendwo eingestellt ist, fällt es auf 14px zurück.

Dies ist besonders nützlich, um Themen zu erstellen oder Benutzerpräferenzen (wie Dark -Modus) zu ermöglichen, ohne große CSS -Stücke zu duplizieren.

Vergessen Sie auch nicht, dass Variablen überall in CSS funktionieren - nicht nur an gemeinsamen Stellen wie Farben oder Größen. Sie können sie sogar für das Übergangszeitpunkt, die Rasterlayouteinstellungen oder komplexe Schatteneffekte verwenden.

Praktische Anwendungsfälle

Benutzerdefinierte Eigenschaften leuchten bei der Verwaltung dynamischer Stile oder Themen wirklich. Hier sind einige praktische Anwendungen:

• Themenumschaltung : Definieren Sie helle und dunkle Themenvariablen und wechseln Sie zwischen ihnen.
• Responsive Design -Tweaks : Abstand oder Schriftgrößen basierend auf der Bildschirmgröße durch Aktualisierung von Variablen in Medienabfragen anpassen.
• Komponentenbasierte Stiftung : Definieren Sie Variablen in Komponentenbehältern, sodass untergeordnete Elemente kontextspezifische Stile erben können.

Angenommen, Sie haben eine Kartenkomponente. Anstelle von Hardcoding Polster oder Grenzradius können Sie so etwas tun wie:

 .Card {
  -Kardpadding: 1rem;
  -Card-radius: 8px;

  Polsterung: var (Kartenpadding);
  Border-Radius: var (Kartenradius);
}

Wenn Sie nun eine Variation der Karte mit unterschiedlichem Abstand oder Eckradius benötigen, können Sie diese Variablen einfach in einer Unterklasse überschreiben:

 .Card.Featsured {
  -Kardpadding: 2Rem;
}

Dies hält Ihre Grundstile sauber und wiederverwendbar, während Sie die Überschreibungen einfach machen.

Aktualisieren von Variablen mit JavaScript

Einer der größten Vorteile von CSS -Variablen ist, dass sie zur Laufzeit mit JavaScript geändert werden können. Dies eröffnet Möglichkeiten für benutzerorientierte Stiländerungen oder dynamische Themen.

So aktualisieren Sie eine Variable aus JavaScript:

 document.documentElement.style.setProperty ('-primary color', '#ff5722');

Dies würde die weltweit --primary-color verändern. Wenn Sie ein bestimmtes Element anstelle des Stammes ansprechen möchten, wählen Sie zuerst dieses Element aus.

Sie können dies verwenden, um:

• Lassen Sie Benutzer eine Themenfarbe von einem Picker auswählen.
• Wechseln Sie für die Barrierefreiheit in den hohen kontrastischen Modus.
• Animalwerte im Laufe der Zeit animieren (z. B. für interaktive UI -Elemente).

Denken Sie daran, dass das Ändern einer Variablen alle Orte, an denen sie verwendet werden, aktualisiert werden. Sie müssen jede CSS -Regel nicht manuell aktualisieren.

Grundsätzlich ist das.

Das obige ist der detaillierte Inhalt vonWas sind CSS -benutzerdefinierte Eigenschaften (Variablen) und wie kann man sie verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!