@@Gunnar:

nuqneH

Wozu brauchst du das Mixin eigentlich? Für

`@include mq("(min-width: 1em)", "(max-width: 2em)")`{:.language-css}  

kannst du doch auch gleich ``@media (min-width: 1em) and (max-width: 2em){:.language-css} schreiben.

Stimmt! ;-)
Das wäre nun wirklich nicht besonders hilfreich.

Eigentlich wollte ich zum einen mal meine Kenntnisse etwas auffrischen und erweitern, und zum anderen habe ich mir jetzt ein Mixin "gebastelt" samt zweier Helferfunktionen, was mir die Arbeit erleichtert.

Ich verwende zwei Maps (in einer Config-Datei):
Die eine beinhaltet die eigentlichen Breakpoints (egal mit welcher Einheit),
die andere "benannte Bereiche"

Und da ich ja wie bereits erwähnt überwiegend stacking MQs verwende, muss mein Mixin also den entsprechenden 'max-width' Wert berechnen.

Beispiele:

@include mq(bp4) {...}  

ergibt:

@media screen and (min-width: 30em) and (max-width: 37.45em) {...}  

@include mq(bp4, bp8) {...}  

ergibt:

@media screen and (min-width: 30em) and (max-width: 47.95em) {...}  

@include mq((media, print), (min, bp8)) {...}  

ergibt:

@media print and (min-width: 48em) {...}  

@include mq((bp4, bp8), (orient, landscape)) {...}  

ergibt:

@media screen and (min-width: 30em) and (max-width: 47.95em) and (orientation: landscape) {...}  

@include mq(only-medium) {...}  

ergibt:

@media screen and (min-width: 48em) and (max-width: 99.95em) {...}  

Ich wollte mir u.a. auch ein "Hintertürchen" offen halten, falls ich doch mal auf overlapping MQs umsteige ...! :-P

Gruß Gunther