[SASS] mixin @media rule Verknüpfung der Expressions?

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Das "funktioniert" halt nur so lange zuverlässig, wie die Annahme "Basis-Schriftgröße = 16px" zutrifft.

Eben.

Denn das kann ja eigentlich nur zu "Problemen" führen, denn nicht nur bei Media Queries geht man als Autor von oben erwähnter Annahme bezüglich der Basis-Schriftgröße aus.

In anderen Fällen skaliert alles gleichermaßen, wenn konsequent em/rem verwendet werden (außer vielleicht für sowas wie border-width: 1px).

Ist eigentlich irgendwo festgelegt, dass die Basis-Schriftgröße 16px beträgt? Könnte ein Hersteller auf die Idee kommen, für sein Gerät 14px oder 18px zu wählen?

Aber um deine Frage zu beantworten: Ich ziehe jeweils 1/16 von meinem nächsthöheren Breakpointwert ab.

Dann hast du eventuell eine Lücke bzw. Überschneidung. Nicht sehr wahrscheinlich, noch dazu dass die Viewportgröße beim Nutzer tatsächlich genau da rein fällt, aber dennoch möglich. Und als Entwickler möchte man möglichst robusten Code schreiben, der nicht bei Edge-Cases problematisch ist.

Dann anders gefragt: Kennst du ein fertiges Mixin, welches automatisch die diversen Vendor Prefixes und 'resolution' erstellt, wenn ich eine device-ratio angebe?

Wo ist das Problem, sich das schnell selbst zu schreiben?

@mixin resmq($dppx)  
{  
	@media  
		(-webkit-min-device-pixel-ratio: $dppx),  
		(min-resolution: #{$dppx * 96}dpi),  
		(min-resolution: #{$dppx}dppx)  
	{  
		@content;  
	}	  
}

Aufruf:

body  
{  
	@include resmq(2)  
	{  
		@include mq("(min-width: 1em)", "(max-width: 2em)")  
		{  
			background: rebeccapurple;  
		}  
	}  
}

oder

body  
{  
	@include mq("(min-width: 1em)", "(max-width: 2em)")  
	{  
		@include resmq(2)  
		{  
			background: rebeccapurple;  
		}  
	}  
}

Sass sortiert sich das schon. Ist ja nicht LESS.

Qapla'