CSS-Preprozessor mit der Möglichkeit, Variablen in einer @ media-Abfrage zu definieren
Derzeit verwende ich LESS als meinen wichtigsten CSS-Pre-Prozessor. Ich habe (und ich bin sicher, viele Leute haben dieses Bedürfnis) Variablen in a zu definieren@media Abfrage wie:
@media screen and (max-width: 479px) {
myVar: 10px;
}
@media screen and (min-width: 480px) and (max-width: 767px) {
myVar: 20px;
}
@media screen and (min-width: 768px) {
myVar: 30px;
}
.myElement {
padding: @myVar;
}
Dies funktioniert in LESS aufgrund der Kompilierung nicht (@myVar wird im Rahmen eines jeden Einzelnen definiert@media nur, aber nicht global). Auch wenn ich definiere@myVar Global vor den Medienabfragen wird es nicht gemäß den Medienabfragen und aktualisiert.myElement erhält diesen Anfangswert, egal was passiert.
Die Frage ist also, ob es möglich ist, dies in einem anderen CSS-Präprozessor zu erreichen, oder ob wir dazu verdammt sind, das zu überschreiben.myElement innerhalb jeder Medienabfrage? In diesem einfachsten Beispiel kein Problem, aber in realen Projekten kann dies viel Zeit und Zeit beim Kopieren / Einfügen sparen.
BEARBEITEN: Keine Lösung, aber aProblemumgehung für mein spezielles Projekt:
Stellen Sie die Schriftgröße ein<html> um die Schriftgröße zu bestimmenmyVar Die Variable LESS ist in definiertrem anstattpx als Ableitung der GrundschriftgrößeBenutzen@media Abfragen zum Anpassen der Basisschriftgröße für verschiedene Medien.WAHLWEISE BenutzenREM-Einheit Polyfill Für Browser, die noch nicht unterstützt werdenrem (http://caniuse.com/#search=rem). Dies funktioniert nicht in IE 8 und darunter, aber nicht wegen mangelnder Unterstützung fürrem – Medienabfragen werden nicht unterstützt. IE8 und niedriger erhalten also ohnehin ein Stylesheet ohne Medienabfragen in voller Größe.Code-Auszug:
@myVar: .77rem; // roughly 10px, 20px and 30px respectively
html { font-size: 13px }
@media screen and (min-width: 480px) and (max-width: 767px) {
html { font-size: 26px }
}
@media screen and (min-width: 768px) {
html { font-size: 39px }
}
.myElement {
padding: @myVar;
}
Hier ist einJSBin mit einem umfangreicheren Beispiel, das verschiedene Schriftgrößenelemente mit unterschiedlich bemessenen Blöcken mischt.
Einfach und flexibel für meine Bedürfnisse. Hoffentlich wird jemand anderem weiterhelfen.