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

Der Aufbau der Quelldateien für Sass

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sass ist ein Präprozessor, allerdings arbeitet Sass nur serverseitig. Es baut auf Ruby auf, aber Prepros kann auch mit diesen Dateien umgehen.
08:22

Transkript

Sass ist ähnlich wie LESS ein sogenannter Präprozessor. Das heißt, Sass hat genauso wie LESS die Möglichkeit, die Fähigkeiten von CSS noch zu erweitern, und den Umgang mit den CSS-Dateien damit auch einfacher zu machen, weil man mehr Möglichkeiten hat. Allerdings kann Sass nur serverseitig verwendet werden, und normalerweise brauchen Sie Ruby, um mit Sass arbeiten zu können, denn Sass baut auf Ruby auf. Sass ist vor allem im Bereich Linux durchaus vermehrt im Einsatz. Es gibt nun von Bootstrap, obwohl Bootstrap ein ganz urtümliches LESS-Projekt ist, eine Portation hin zu Sass. Ich gehe hier auf Bootstrap herunterladen, und habe hier als dritte Möglichkeit des Herunterladens die Bootstrap-Variante für Sass herunterzuladen. Oder ich kann hier oben auf den Link klicken, und lande dann erstmal bei GitHub, um mir die einzelnen Dateien auch ansehen zu können, und kann dann hier über diesen Download-Button die ZIP-Datei herunterladen. Das habe ich jetzt für mich schon erledigt, und habe die ZIP-Datei bereits entpackt. Die liegt jetzt hier bei mir auf dem Desktop. Mit einem Doppelklick öffne ich sie, und sehe mir mal den Inhalt dieses Ordners an. Wir haben auf der einen Seite wieder einiges an zusätzlichen Dateien, die gebraucht werden, um dann Bootstrap endgültig kompilieren zu können. Es sind viele Dateien dabei, die hauptsächlich mit der Entwicklung von Bootstrap selbst zu tun haben, Das Wesentliche liegt im Ordner assets. Ähnlich wie der dist-Ordner bei den LESS-Dateien haben wir hier in dem Ordner assets die eigentlichen Beiwerke zum Erstellen der Bootstrap-Seite liegen. Hier ist einerseits der fonts-Ordner, wo die glyphicons drinnen liegen. Da ändert sich nicht sehr viel. Wir haben bereits einen vorgefertigten image-Ordner, Es gibt die Javascript-Dateien, die hier draußen in den fast bekannten Versionen, nämlich nicht minimiert und minimiert, vorliegen, und wir haben im Bootstrap-Ordner nochmal diese einzelnen Javascript-Dateien, die dann später zusammengefasst werden. Wir haben stylesheets. In diesem stylesheet-Ordner verbergen sich eben die speziellen Sass-Dateien, wobei auch hier im Bootstrap-Ordner wir wieder lauter einzelne Sass-Dateien haben, die alle zusammen erst das CSS-Layout ergeben würden. Ähnlich wie auch bei LESS gibt es vor allem hier eine Variablen-SCSS. Es muss irgendwo auch noch die bootstrap.scss geben, die dann kompiliert werden kann. Die _bootstrap.scss Datei liegt hier draußen. Wenn wir da jetzt einen kleinen Blick zum Beispiel mit Notepad hineinwerfen, dann sehen wir, dass es sich auch hierbei um eine Datei handelt, die lediglich vom Import all dieser Einzeldateien und -typen lebt. Ich werde mir jetzt dieses speziell arrangierte _bootstrap.scss ebenfalls in mein AptanaStudio holen, und werde dann schauen, wie wir damit arbeiten können. Eigentlich, wie gesagt, ist es ja so, dass wir dafür Ruby bräuchten, günstigerweise haben wir es aber mit einem Compiler zu tun, der auch mit Sass-Dateien umgehen kann. Doch zuallererst importieren wir mal das Projekt. Wir haben wieder Existing Folder as New Project, klicken auf Next , gehen den Folder suchen, in diesem Fall ist es unser bootstrap-sass Ordner. Nur den Projektnamen werde ich ein bisschen abkürzen. Da muss uns bootstrap-sass reichen. Dann klicke ich auf Finish, und habe jetzt hier meinen bootstrap-sass Ordner. Ich werde mir einfach, damit es schneller geht, mal die Index-Datei rüberkopieren, aus meinem LESS-Projekt, mit Strg+C kopiere ich es mir, und werde es mir hier in meinem bootstrap-sass Ordner einfügen, mithilfe von Paste. Da habe ich jetzt meine Index-Datei liegen. Wenn ich jetzt die Index-Datei öffne und versuche anzusehen, dann merken Sie, dass ich da mit dem CSS noch so meine Probleme habe. Das Einzige, was hier funktioniert, ist die ein- bzw. ausgeblendete Navigation. Das müssen wir irgendwie noch besser hinbekommen. Und zwar, indem wir hier die Referenzierung vielleicht anpassen. Aber wohin wollen wir die Referenzierung überhaupt anpassen? SCSS-Dateien können ja nicht gelesen werden von einem Browser. Das heißt, wir müssen jetzt erstmal dafür sorgen, dass uns diese _bootstrap.scss umgewandelt wird, in eine normale CSS-Datei. Ich lege mir zuerst hier unter stylesheets eine bootstrap.css Datei an. Ich habe hier File New und wähle: bootstrap.css, sage Finish. Die ist jetzt noch ganz leer. Ich werde jetzt aber unseren Compiler starten, Prepos, und mit dessen Hilfe dann versuchen, auch die Sass-Dateien für mich arbeiten zu lassen. Ich möchte weiter mit Prepos arbeiten, und hole mir jetzt dieses bootstrap-sass Projekt in Prepos hinein, und bekomme jetzt die Meldung, dass es gut angekommen ist bei Prepos, und muss jetzt noch eben die stylesheet Ausgabe anpassen. Ich habe hier mein _bootstrap.scss, und wenn ich draufklicke, sehe ich, dass ich hier die Möglichkeit habe, noch einzustellen, wohin die Ausgabe gehen soll. Ich sage, die Ausgabe geht in meinen CSS-Ordner, sage Speichern. Ich habe es schon einmal angelegt, also werde ich ihn überschreiben müssen, und habe jetzt hier die Möglichkeit, diverse Häckchen zu setzen. Auto Compile ist ganz wichtig, in einer späteren Folge werden wir auch Compress wählen, aber noch lassen wir das Ganze nicht zusammengequetscht, damit wir eventuell noch nachschauen können, ob alles passt. Jetzt sage ich gleich mal Process File. Hat funktioniert. Jetzt werde ich mir dann einfach anschauen, womit meine bootstrap.css gefüllt wurde. Sie wurde also, äußerst gut auskommentiert, Zeile für Zeile, mit den Inhalten aus der _bootstrap.scss befüllt. Wenn ich jetzt hier meine Angaben anpasse, nämlich, dass ich aus dem assets-Ordner, und dort aus dem stylesheet-Ordner meine bootstrap.css haben will, und das Ganze speichere, bekomme ich schon diese grundlegende Formatierung inklusive meiner nicht vorhandenen Bilder. Damit habe ich, ohne dass ich großartig Ruby installieren musste, die Möglichkeit bekommen, auch mit den Sass-Dateien zu arbeiten. Wobei es normalerweise ja der Sinn ist, dass Sie bereits Sass installiert haben und dann mit den Dateien arbeiten.

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!