Breakpoints definieren mit Variablen

gringo4

Hallo,
ich habe versucht meine Breakpoints mit Variablen zu definieren, wegen der Einstellung von verschiedenen Sprachen. Diese funktionieren einwandfrei, wenn ich Zahlen eingebe, aber nicht bei der Deklarierung von Variablen. Es geht auf allen Browsern nicht.

Mein Codebeispiel sieht wie folgt aus:

Code

$small: 600px;
$medium: 1000px;
$large: 1400px;




@media (max-width: $small) {
XXXX
}


@media (max-width: $medium) {
XXXX
}


@media (max-width: $large) {
XXXX
}

Alles anzeigen

Weißt vielleicht jemand woran das liegen könnte?

Sailor

An der falschen Syntax...
https://www.w3schools.com/css/css3_variables.asp

gringo4

Zitat von Sailor

An der falschen Syntax...
https://www.w3schools.com/css/css3_variables.asp

Die Syntax habe ich von hier:
https://responsivenews.co.uk/post/123104512…sive-web-design
Punkt 8

Ich habe es jetzt mit

Code

:root {
  --small: 400px; 
}




@media (max-width: var(--small)) {


}

Alles anzeigen

Und es hat immer noch nicht geklappt. Ist das überhaupt richtig so?

Sailor

Die Syntax in deinem verlinkten Beispiel basiert auf einem CSS Präprozessor (https://de.wikipedia.org/wiki/Sass_(Stylesheet-Sprache)). Somit wird die Syntax auch nur von diesem Präprozessor unterstützt - ein Standardbrowser macht das nicht.

Diese 'andere' Syntax zum nutzen von Variablen ist jedoch unabhängig von irgendwelchen zusätzlichen Prozessen - das macht der Browser ganz alleine. Leider haben ältere Browser das noch nicht wirklich implementiert.

Hmmm... in deinem Fall mit der Nutzung von Variablen in einer @media Query scheint das aber anders zu sein :(. Hab das gerade mal selber getestet (aktueller FireFox, Chrome und IE 11), die Variablen funktionieren... nur leider nicht, wenn sie in einer @media Anweisung genutzt werden.
Hab mal einen kleinen Testcode erstellt...

HTML

<!DOCTYPE HTML>
<html lang="de">
<head>
<title>...</title>
<style>
:root {
  --farbe1: #f0f;
  --farbe2: #f00;
  --farbe3: #0f0;
  --farbe4: #00f;
}
p {
      color: var(--farbe1);
   }
@media screen and (max-width: 1200px) {
   p {
      color: var(--farbe2);
   }
}


@media screen and (max-width: 1000px) {
   p {
      color: var(--farbe3);
   }
}


@media screen and (max-width: 800px) {
   p {
      color: var(--farbe4);
   }
}
</style>
</head>
<body>
<p>Textfarbe ändern</p>
</body>
</html>

Alles anzeigen

Teste das mal!

Tags