Ich versuche, die Verwendung einer Sass-Variablen mit @ media-Abfragen wie folgt zu kombinieren:
$base_width:1160px;
@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}
$base_width
wird dann an verschiedenen Stellen in den prozentualen Messungen der Stylesheet-Breite definiert, um Fluid-Layouts zu erstellen.
Wenn ich das mache, scheint die Variable richtig erkannt zu werden, die Bedingungen für die Medienabfrage jedoch nicht. Der obige Code erzeugt beispielsweise unabhängig von der Bildschirmbreite ein 1160px-Layout. Wenn ich die @ media-Anweisungen wie folgt umdrehe:
@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}
Es wird ein 960px-Layout erstellt, unabhängig von der Bildschirmbreite. Beachten Sie auch, dass beim Entfernen der ersten Zeile $base_width: 1160px;
ein Fehler für eine undefinierte Variable zurückgegeben wird. Irgendwelche Ideen, was mir fehlt?
sass
media-queries
Jeremy S.
quelle
quelle
Antworten:
Das ist einfach nicht möglich. Da der Trigger
@media screen and (max-width: 1170px)
auf der Clientseite erfolgt.Das Erreichen Ihres erwarteten Ergebnisses wäre nur möglich, wenn SASS alle Regeln und Eigenschaften in Ihrem Stylesheet, das Ihre
$base_width
Variable enthält, erfasst und entsprechend kopiert / geändert hat.Da es nicht automatisch funktioniert, können Sie es wie folgt von Hand machen:
Dies ist nicht wirklich trocken, aber das Beste, was Sie tun können.
Wenn die Änderungen jedes Mal gleich sind, können Sie auch ein Mixin vorbereiten, das alle sich ändernden Werte enthält, sodass Sie es nicht wiederholen müssen. Außerdem können Sie versuchen, das Mixin mit bestimmten Änderungen zu kombinieren. Mögen:
Und der Mixin würde so aussehen
quelle
$foo: 1rem; @media (min-width: 10rem) {$foo: 2rem} .class {font-size: $foo} .class2 {padding: $foo}
würde in.class {font-size: 1rem} .class2 {padding: 1rem} @media (min-width: 10rem) (.class {font-size: 2rem} .class2 {padding: 2rem}}
Ähnlich wie bei Philipp Zedlers Antwort können Sie dies mit einem Mixin tun. So können Sie alles in einer einzigen Datei haben, wenn Sie möchten.
quelle
Bearbeiten: Bitte verwenden Sie diese Lösung nicht. Die Antwort von Ronen ist viel besser.
Als DRY-Lösung können Sie die
@import
Anweisung in einer Medienabfrage verwenden, z. B. wie folgt.Sie definieren alle reaktionsfähigen Elemente in der enthaltenen Datei mithilfe der in der Medienabfrage definierten Variablen. Alles, was Sie wiederholen müssen, ist die Importanweisung.
quelle
Dies ist mit SASS nicht möglich, aber mit CSS-Variablen (oder benutzerdefinierten CSS-Eigenschaften ). Der einzige Nachteil ist die Browserunterstützung - aber es gibt tatsächlich ein PostCSS-Plugin - postcss-css-variables -, das die Verwendung von CSS-Variablen "abflacht" (wodurch Sie auch ältere Browser unterstützen).
Das folgende Beispiel funktioniert hervorragend mit SASS (und mit postcss-css-Variablen erhalten Sie auch Unterstützung für ältere Browser).
Dies würde zu folgendem CSS führen. Die sich wiederholenden Medienabfragen erhöhen die Dateigröße, aber ich habe festgestellt, dass die Erhöhung normalerweise vernachlässigbar ist, sobald der Webserver angewendet wird
gzip
(was normalerweise automatisch geschieht ).quelle
Mit der großartigen Antwort von @ ronen und einer Karte steht echte Leistung zur Verfügung:
Es ist jetzt möglich, viel mehr DRY-Medienabfragen
.myDiv
mit einer Reihe unterschiedlicher Werte durchzuführen.Kartendokumente: https://sass-lang.com/documentation/functions/map
Beispiel für eine Kartenverwendung: https://www.sitepoint.com/using-sass-maps/
quelle
Ich hatte das gleiche Problem.
Die
$menu-width
Variable sollte in der mobilen Ansicht@media only screen and (max-width : 768px)
240 Pixel und in der Desktopansicht 340 Pixel betragen .Also habe ich einfach zwei Variablen erstellt:
Und so habe ich es benutzt:
quelle
Zwei Empfehlungen
1 Schreiben Sie Ihre "Standard" -CSS-Anweisungen für kleine Bildschirme und verwenden Sie Medienabfragen nur für größere Bildschirme. Eine
max-width
Medienabfrage ist normalerweise nicht erforderlich .Beispiel (vorausgesetzt, das Element hat die Klasse "container")
2 Verwenden Sie CSS-Variablen, um das Problem zu lösen, wenn Sie können .
Hinweis:
Da das Fenster eine Breite von 1160 Pixel hat, wenn das Fenster eine Breite von 1170 Pixel hat, ist es möglicherweise besser, eine Breite von 100% und eine maximale Breite von 1160 Pixel zu verwenden, und das übergeordnete Element hat möglicherweise eine horizontale Auffüllung von 5 Pixel, solange Die Box-Sizing-Eigenschaft ist auf Border-Box festgelegt. Es gibt viele Möglichkeiten, das Problem zu lösen. Wenn das übergeordnete Element kein Flex- oder Grid-Container ist, können Sie es verwenden
.container { margin: auto }
.quelle