/ / Unterschiedliche Oberbalkenhöhen basierend auf Medienabfrage - zurb-foundation

Unterschiedliche Oberstrichhöhen basierend auf Medienabfrage - zurb-foundation

Ich habe das eingestellt $topbar-height Variable auf einen bestimmten Wert, der höher als der Standardwert ist.

Für die mobile Version möchte ich den Standardwert behalten.

Wie kann ich das machen?

Ich kann nicht nur den Wert von .topbar, da diese Variable von Foundation für viele andere Attribute der Topbar und ihrer untergeordneten Elemente (Zeilenhöhe, Abstand, Rand usw.) verwendet wird.

Antworten:

2 für die Antwort № 1

Ich habe herausgefunden, dass so etwas funktioniert:

@media #{$small} {
$topbar-height: 85px;
@import "foundation/components/top-bar";
...
}

Vielleicht ist nicht der sauberste Ansatz (ich muss überprüfenwenn das überflüssige CSS erzeugt) aber ich bevorzuge das was, obwohl ich denke, dass @James auch gut beantwortet (wahrscheinlich ist es sogar ein saubererer Weg für das, was das produzierte CSS betrifft).

Ich denke, dass ein tatsächliches top-bar Mixin würde dieses Problem lösen: Ich werde es als Vorschlag hinzufügen.


1 für die Antwort № 2

Dies ist mit der Foundation nicht möglich. Ich habe in der Vergangenheit zwei Dinge getan, um benutzerdefinierte Funktionen wie diese zu erhalten:

1) Überschreibe die CSS-Klassen in app.scss durch Anhängen von! Wichtig, damit die Änderungen wirksam werden.

oder

2) kopierte die Mixins und HTML-Klassengeneration Sass vom Zurb-Foundation-Juwel (zum Beispiel foundation/components/top-bar.scss) entweder zu app.scss oder zu einer neuen Datei, dann ändern Sie app.scss so, dass Sie den Import nicht mehr verwenden, indem Sie ihn auskommentieren

// @import "foundation";

und alles andere importieren (für die Entwicklung, aber nur die Teile, die ich für die Produktion benötige), mit Ausnahme der Datei, die in diesem Fall überschrieben werden soll

// @import "foundation/components/top-bar";

Sobald Sie das getan haben, können Sie die HTML-Generierung oder die Mixins ändern oder Medienabfragen für alles, was Sie tun möchten, hinzufügen.

Denken Sie daran, wenn Sie eine solche Änderung vornehmen, könnte es mit zukünftigen Versionen der Zurb-Stiftung brechen.