Können native CSS-Variablen in Medienabfragen verwendet werden?

Native CSS-Variablen in Medienabfragen verwenden

Native CSS-Variablen sind ein leistungsstarkes Tool zum Steuern von Stilen basierend auf den Werten der in definierten Variablen CSS. Es gibt jedoch eine Einschränkung bei der Verwendung dieser Variablen in Medienabfragen.

Das Problem tritt auf, wenn versucht wird, CSS-Variablen in Medienabfragen zu verwenden. Betrachten Sie beispielsweise den folgenden Code:

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

Dieser Code zielt darauf ab, eine Medienabfrage zu definieren, die Stile anwendet, wenn die Breite des Ansichtsfensters kleiner oder gleich dem in der Variablen --mobile-breakpoint gespeicherten Wert ist. Dieser Ansatz funktioniert jedoch nicht, da CSS-Variablen nicht in Medienabfragen verwendet werden können.

Die CSS-Spezifikation besagt ausdrücklich, dass die Funktion var(), die für den Zugriff auf CSS-Variablen verwendet wird, nur in Eigenschaftswerten verwendet werden kann. Es kann nicht in Eigenschaftsnamen, Selektoren oder Medienabfragen verwendet werden. Diese Einschränkung wird eingeführt, um sicherzustellen, dass CSS-Variablen für den beabsichtigten Zweck der Steuerung von Stilwerten verwendet werden, anstatt die Struktur oder Funktionalität des CSS-Dokuments zu ändern.

Um dieses Problem zu beheben, kann man einen CSS-Präprozessor wie verwenden Sass oder weniger. Diese Präprozessoren ermöglichen die Verwendung von Variablen in Medienabfragen, indem sie den Code in gültiges CSS übersetzen. Unter Verwendung eines Präprozessors könnte der vorherige Code wie folgt umgeschrieben werden:

$mobile-breakpoint: 642px;

@media (max-width: $mobile-breakpoint) {

}

Durch die Verwendung eines Präprozessors kann die Variable $mobile-breakpoint innerhalb der Medienabfrage verwendet werden, wodurch das gewünschte Stilverhalten basierend auf dem Definierten ermöglicht wird variabel.

Das obige ist der detaillierte Inhalt vonKönnen native CSS-Variablen in Medienabfragen verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!