One-Page-Webseiten mit Bootstrap, LESS und Sass

Titelschrift in Sass integrieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Titel bekommt eine eigene Schriftart, die als Variable eingebunden und dann verwendet wird.
05:27

Transkript

Ich möchte nun die Tatsache, dass sich dieser Titel hier noch etwas mehr Styling verdient, hat nutzen, um ein-zwei Fingerübungen mit "Sass" zu machen. Die erste Fingerübung wird darin bestehen, dass wir hier dem Titel noch einmal eine andere Schriftart geben, der ihn absetzt vom restlichen Text der Seite und den werden wir aber gleich direkt als Variable hinterlegen, damit wir gegebenenfalls bei einer Erweiterung der Seite auch in einem anderem Zusammenhang noch darauf zugreifen können. Das heißt, mein erster Weg führt mich zu Google Fonts, und ich habe schon eine Schrift im Hinterkopf, die heißt "Crete" und hier um diese "Crete Round" wird es gehen, und ich sage "Add to Collection" und dann gehe ich auf "Quick use". Ich möchte die "Normal"-Version, das heißt, hier setze ich das Häkchen. Und wenn ich jetzt hinunter scrolle, habe ich entweder wieder die Möglichkeit, den Verweis in meinen Headerbereich meiner HTML einzubauen oder ich kann den Importbefehl wählen. Ich werde mich für den Importbefehl entscheiden, mit Strg+C kopiere ich ihn mir in die Zwischenablage und wechsle dann in meinen Bootstrap-Folder, um in der Bootstrap SCSS meine Schrift einzufügen. Ich habe hier ja schon eine Schrift eingefügt, nämlich die "Hind", und jetzt ist mit Str+V auch "Crete" dran. Ich speichere es mit Strg+S und werde jetzt in die "variables" CSS wechseln, um dort eben meine höchst eigene Interpretation von Typographie noch zu hinterlegen. Ich habe hier die Abteilung für die Typographien und ich werde jetzt unterhalb von der "font-family-base" meine eigenen Einträge machen. Das heißt, ich binde die Schrift mit "$font-family-title" ein und dann kann ich mir hier diese Zeile holen, um sie mir dann hinüber zu kopieren, in meine Variablendatei. Mit Strg+V ist das Ganze zugewiesen, allerdings brauche ich nicht zwei Mal hier "font-faily" stehen zu haben. So, und nun kann ich, anstatt dass ich einfach in meinem speziellen Bereich "Crete" verwende, auf "font-family-title" zurückgreifen. Ich habe diesen Titel hier als "h1" in meiner Sektion "home" stehen, und nachdem ich für die Sektion "home" ja schon ein-zwei Stylingideen hatte, gibt es in "mein.scss" auch schon eine Abteilung für "home". Und nachdem ich ja in "Sass" die Möglichkeit habe, die Stile ineinander zu betten, werde ich das jetzt auch tun und werde jetzt sagen, hier in meiner "home" habe ich jetzt eine "h1", die eine etwas speziellere Behandlung bekommt. Und die Behandlung besteht darin, dass ich zuerst eine "font-family" zuweise, und die "font-family" ist jetzt eben meine "$font-family-title". Dann wird das Ganze auch eine gewisse Größe bekommen, das heißt, größer, als die normalen Schriftgrößen. Dafür gibt es bei "variables" die wunderschöne Angewohnheit, einfach die Basisschrift zu nehmen und diese dann noch um einen gewissen Grad zu vergrößern. Ich werde mir jetzt diese Zeile hier heraus kopieren und werde sie dann an meine Ansprüche anpassen. Das heißt mit Strg+C kopiere ich sie mir herüber und meine font-size ist eben auch eine nach oben gerundete, also "ceil", "font-size", die sich auf die "base" beruft, nur dass ich hier nicht 1,25 habe, sondern ich schätze einmal mit 4,25 -- sieht das ganz gut aus. Als letzten Eintrag habe ich noch eine "font-weight", das liegt daran, dass diese auch ein bisschen fester werden sollte, und da gibt es jetzt auch eine eigene Variable, die "heading-font-weight" heißt. Damit habe ich meine "h1" mit Variablen gut bestückt. Ich speichere das Ergebnis; ich habe mich ganz offensichtlich verschrieben, ich frage mich jetzt gerade nur, wo. Ja, da liegt der Fehler im Detail, es ist nämlich "$headings-font-weight". Und wenn ich es jetzt speichere, sollte eigentlich alles gut sein. So ist es auch. Sehen wir uns das Ergebnis an. Ja, jetzt ist die Schrift eindeutig gewachsen, und das steht ihr auch viel besser. Das heißt, wir haben jetzt eine eigene Variable erzeugt und diese auch gleich zum Einsatz gebracht.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!