Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Mit Sass arbeiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Syntax ist zwar geringfügig anders als in LESS, aber die Vorgehensweisen beider Präprozessorsprachen ähneln sich.
05:36

Transkript

Bei der Arbeit mit "Sass" geht man eigentlich ganz ähnlich vor, wie man es auch mit "LESS" täte. D. h., ich habe hier meine kleinen Einzeldateien, die dann in der "bootstrap.scss" zusammengefasst werden und später wird das Ganze kompiliert in mein "bootstrap.css", und das schon in minimierter Form. Ich werde mir jetzt die Variablen ansehen, um vielleicht zu bemerken, wo der kleine Unterschied liegt. Der liegt sofort hier auf der Hand. Während alles sehr ähnlich ausschaut, wie der Aufbau ist und wie die Zuweisungen erfolgen, sehen wir doch, dass der Hauptunterschied, die Bezeichnung der Variablen selbst ist. Während in "LESS" ein @-Zeichen das Zeichen für eine Variable ist, ist es bei "Sass" das $-Zeichen. Aber sonst funktioniert alles ähnlich wie beim anderen Pre-processor. D. h., die Funktionen von CSS wurden erweitert, einerseits eben um den Einsatz der Variablen. Es gibt "mixins". Die finden Sie hier. Die dann wieder eine Zusammenstellung sind und wie Klassen weiterverwendet werden können. Ich kann auch Klassen Klassen zuweisen. Das alles bleibt gleich. Wie werden jetzt zwei kleine Versuchsballone starten. D. h., der eine Versuchsballon betrifft die Farbgebung. Hier werde ich jetzt ebenfalls meine BrandPrimary ändern und zwar in den Farbton, den wir schon kennen: #878179 und ich schliesse das Ganze mit einem Strichpunkt ab. Dann weise ich dem Hintergrund auch noch eine eigene Farbe zu. Das war ein #dfe0d9; wenn mich nicht alles getäuscht hat. Ich speichere meinen Eintrag und wechsle zu meinem "index". Das Ganze wurde kompiliert, und wenn ich jetzt meinen Firefox öffne, sollte ich die Hintergrundfarbe schon haben. Dann sehe ich auch gleich, dass mir nicht nur die Hintergrundfarbe verloren gegangen ist, bzw. nicht nur die Hintergrundfarbe ersetzt oder neu gemacht wird, sondern dass ich auch wieder mein keines zusätzliches Style-Sheet brauche. Damit einerseits der Text unterhalb meiner Navigation, hier vorrutschen kann und ich dann meine Sektionen besser im Raum verteilen kann. Ich werde also, in bewährter Weise, eine eigene Datei anlegen, in der ich das alles hinterlege, und zwar im Ordner "bootstrap". D. h., rechter Mausklick und ich sage: "New" "File". Es heißt jetzt: "mein.scss" Ich klicke auf "Finish"; hier ist: "mein.scss". Das befülle ich jetzt wieder mit diesen zusätzlichen Informationen. Also einerseits: html, body sollen eine Weite von 100 % haben und eine Höhe von 100 %. Zusätzlich sollte der body noch ein Padding bekommen, nämlich ein padding-top, von 70 Pixel. So, das ist mal das erste, was ich für das Runterrutschen unter, bzw. das Hervorrutschen aus der Navigation, haben möchte. Ich speichere das Ganze in "meins". Ich muss jetzt aber "meins" auch noch im "bootstrap.scss" einbinden. D. h., ich öffne jetzt "bootstrap.scss" und sehe mir dabei auch gleich an, wie der Import aussieht. Und zwar, werde ich auch hier, ganz am Ende erst, meinen Stil einbinden und folge dabei dem, was ich oben sehe. Import, und ich bin im "Bootstrap"- Verzeichnis, und dort heißt es: "meins". Am Schluss brauche ich noch ein Semicolon und das sollte es jetzt eigentlich sein. Vielleicht nur wegen der Optik hier noch einen Zeilenabstand. Gut, wenn alles funktioniert hat... Hat es natürlich nicht... D.h. ich habe mich in irgendeiner Weise verschrieben. Import, bootstrap, meins...oh! Da gehört kein S hin! Sie sehen, ich werde sofort geschimpft, wenn da etwas nicht passt. Ich speichere es nochmals und jetzt ist alles in Ordnung! Gut, d. h., ich sollte jetzt mit meiner Überschrift gut lesbar sein. Sie sehen, es läuft in "Sass" ähnlich wie in "LESS". Sie müssen nur darauf achten, dass die Syntax sich ein klein wenig unterscheidet. Aber genau diese kleinen Unterschiede, machen es manchmal etwas schwieriger.

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!