CSS -Variablen (benutzerdefinierte Attribute) verbessern die Wartbarkeit des Stils, indem sie Werte definieren und wiederverwenden. Die Antwort ist zu verwenden -definieren Sie Variablen und rufen Sie sie mit var () auf. 1. Definieren Sie sie in: Wurzel, wie-Primary-Color: #007BFF; 2. Verwenden Sie var (), um sie in Stilen wie Hintergrundfarbe zu verweisen: var (-Prim?rfarbe); 3. kann zur Wiederverwendung von Themen und Design -Token verwendet werden; 4. Stützen Sie Fallback-Werte wie var (-Farbe, #333); 5. kann durch JavaScript dynamisch gelesen und modifiziert werden und schlie?lich flexible und wartbare CSS realisieren.

CSS -Variablen, auch als benutzerdefinierte Eigenschaften bezeichnete Eigenschaften, sind eine M?glichkeit, Werte (wie Farben, Schriftgr??en, Abstand usw.) in Ihrem Stylesheet zu speichern und wiederzuverwenden. Sie helfen dabei, Ihr CSS zu verbessern, konsistenter und leichter zu aktualisieren.

Sie sind besonders nützlich, wenn Sie an gro?en Projekten arbeiten oder Themen (z. B. hell/dunkel) implementieren m?chten, ohne Werte zu wiederholen oder sich auf Pr?prozessoren wie SASS zu verlassen.

So definieren und verwenden Sie CSS -Variablen

CSS-Variablen werden mit dem -- definiert und normalerweise in einem CSS-Regelblock eingestellt-am h?ufigsten auf der :root Pseudo-Klasse, sodass sie global verfügbar sind.

1. Definieren Sie eine Variable

 :Wurzel {
  -Primary-Color: #007BFF;
  -FONT-Gr??e-Large: 1,5Rem;
  -Abstand-Einheit: 16px;
}

• :root stellt sicher, dass die Variablen weltweit zug?nglich sind.
• Sie k?nnen auch Variablen in bestimmten Selektoren definieren, um mehr skopierte Verwendung zu verwenden.

2. Verwenden Sie eine Variable mit var()

Verwenden Sie nach der Definition die Funktion var() um auf die Variable zuzugreifen:

 .Taste {
  Hintergrundfarbe: var (-Prim?rfarbe);
  Schriftgr??e: var (-Schriftgr??e-gro?);
  Polsterung: var (-Abstandseinheit);
}

Dadurch wird die zuvor definierten Werte angewendet.

Praktische Anwendungsf?lle

? Themenverwaltung (z. B. Dunkelmodus)

Sie k?nnen Variablen unter verschiedenen Bedingungen unter Verwendung von Medienabfragen oder Klassen neu definieren.

 :Wurzel {
  --BG-Color: #ffffff;
  --Text-Color: #333333;
}

@media (bevorzugt Farbscheme: dunkel) {
  :Wurzel {
    -BG-Color: #1A1A1A;
    --Text-Color: #f5f5f5;
  }
}

K?rper {
  Hintergrundfarbe: var (-bg-color);
  Farbe: var (-Textfarbe);
  übergang: Hintergrundfarbe 0,3s, Farbe 0,3s;
}

Oder umschalten Themen über JavaScript:

 document.documentElement.style.setProperty ('-bg-color', '#000');

? Wiederverwendbare Design -Token

Anstelle von Hardcoding -Werten:

 .Card {
  Border-Radius: 8px;
  Polsterung: 16px;
  Randboden: 16px;
}

Verwenden Sie Variablen:

 :Wurzel {
  --Border-Radius-MD: 8PX;
  -Padding-sm: 16px;
  -Margin-Bottom: 16px;
}

.Card {
  Border-Radius: var (-Border-Radius-MD);
  Polsterung: var (-padding-sm);
  Margin-Bottom: var (-Margin-Bottom);
}

Jetzt k?nnen Sie an einem Ort den Abstand oder Radien auf Ihrer Website ?ndern.

Fortgeschrittene Tipps

• Fallback -Werte : Sie k?nnen einen Fallback bereitstellen, falls die Variable undefiniert ist:

   Farbe: var (-Textfarbe, #333); / * #333 wird verwendet, wenn-Text-Color nicht existiert */

• Variablen in Variablen : Sie k?nnen sich auf andere Variablen beziehen:

   :Wurzel {
    -Primary: #007BFF;
    -Primary-Dark: Color-Mix (in SRGB, var (-prim?r), schwarz 20%);
  }

  Hinweis: color-mix() und andere Farbfunktionen funktionieren in modernen Browsern.

• JavaScript -Interaktion : CSS -Variablen k?nnen dynamisch gelesen und ver?ndert werden:

   // Erhalten Sie eine Variable
  GetComputedStyle (document.documentElement) .getPropertyValue ('-prim?rfarben');
  
  // eine Variable festlegen
  document.documentElement.style.setProperty ('-primary color', 'rot');

Umfang der CSS -Variablen

Sie folgen den normalen CSS -Kaskadierungsregeln. Definieren Sie sie auf :root für den globalen Zugriff oder auf bestimmte Elemente für den lokalen Bereich:

 .sidebar {
  -BG-Color: #f0f0f0;
  Hintergrund: var (-bg-color);
}

--bg-color gilt nur innerhalb .sidebar und seine Kinder.

Grunds?tzlich bieten CSS -Variablen dynamische, wiederverwendbare Werte direkt in einfacher CSS - kein Pr?prozessor erforderlich. Sie sind in modernen Browsern gut unterstützt und machen das Styling flexibler und wartbarer.

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