Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Vorbereitungen für einen serverseitigen Einsatz

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mit Hilfe des Programms Prepros ist das Kompilieren der LESS-Dateien keine Hexerei.
05:07

Transkript

Wenn Sie "LESS" serverseitig interpretieren wollen, bzw. kompilieren wollen, so gibt es die unterschiedlichsten Lösungsansätze, wie Sie dieses Problem in den Griff bekommen. Sie merken alleine, dass hier schon Einiges angeboten wird. Wenn man auf die "Bootstrap"-Seite geht, so ist dort Grunt das Mittel der Wahl. Grunt ist ein File Management- und Beobachtungssystem, ebenfalls Open Source. Bootstrap selbst kompiliert mithilfe von Grunt. Es gibt aber noch eine viel komfortablere Lösung, die ich Ihnen nicht vorenthalten möchte, und die heißt Prepos. Prepos ist die Entwicklung von Subash Pathak. Über alphapixels.com kommen Sie auf seine Seite, und hier haben Sie schon den Link weiter zu Prepos. Prepos gibt es in zwei Geschmacksrichtungen: einerseits einen freien Download, der nicht ganz so umfangreich von den Möglichkeiten her ist wie die Kaufversion, auch die Kaufversion ist nicht teuer, und bietet nachher noch einige, sehr ansprechende Features, mit denen Sie noch leichter Ihre "LESS"- oder "Sass"-Dateien in CSS umwandeln können. Wenn Sie hier diesem Link für die freie Version folgen, werden Sie dann noch gefragt, ob Sie für ein Windows- oder für ein Mac-System herunterladen wollen. Sie entscheiden sich dann zum Beispiel für Windows. und folgen den Installationsroutinen. Das habe ich bereits getan. Ich habe bereits ein fertiges Prepos hier zur Verwendung bereitliegen. Wir öffnen es jetzt also mit einem Doppelklick und werden erstmal darauf hingewiesen, dass man dankbar ist. Ich wähle hier "Continue Trial". Hier habe ich eine Oberfläche, wo ich einfach nur meine Datei hineinziehen muss, die ich haben möchte. Das ist in meinem Fall mein "Bootstrap"-Ordner. Ich ziehe ihn hier herein, und habe hier die Meldung, dass das Projekt erfolgreich integriert wurde. Ich hätte auch hier unten auf diesen "Add Project" Link klicken können. Ich schiebe es nur ein ganz klein wenig hinauf, damit ich mehr sehe. Ich werde mir jetzt noch ein, zwei Optionen anschauen. "Project Options", Projektname ist "bootstrap", das sieht gut aus. Dann "Enable Automatic Browser Refresh" das heißt, im Browser wird immer automatisch die neue Version angezeigt. Wenn ich jetzt auf CSS gehe, dann muss ich hier einfach dafür sorgen, dass die Pfadangabe zu meinen Ausgabedateien stimmt und passt. Es ist so, dass ich "bootstrapp.less" umwandeln werde in "bootstrap.css", Der Pfad führt in meinen Distributionsordner, und in den CSS-Ordner hinein. In einer späteren Folge könnte ich auch noch dafür sorgen, dass der Output minimiert wird, was ich jetzt aber fürs Erste wegen besserer Lesbarkeit nicht tun werde. Wenn ich mit dem, was ich hier eingestellt habe, zufrieden bin, setze ich hier mein Häckchen für die Options, und habe nun Prepos im Hintergrund hörend und lauschend, und gleich alles, was ich in "LESS" tue, wieder umsetzend in CSS für mich arbeiten. Ich wechsle wieder in mein Aptana, und habe hier meine ganzen Dateien, unter anderem auch meine "LESS"-Dateien. Hier habe ich wieder alles fast ausgebessert. Früher hatte ich hier "bootstrap.min.css" stehen, das habe ich jetzt entfernt, ich habe nur noch "bootstrap.css" stehen, weil das die Ausgabedatei sein wird. Ob das Ganze funktioniert hat, teste ich jetzt mit einer Farbänderung im Hintergrund. Ich öffne "variables.less", und wechsle hier auf einen eher goldgelben Farbton. Das wäre "f0ad4e". Wenn ich jetzt auf Speichern klicke, merken Sie, dass nach kurzer Zeit hier unten eine positive Meldung von Prepos sich hereinschiebt. Ich gehe wieder zurück in meine Index-Datei, öffne Firefox, und tatsächlich, Prepos macht seine Arbeit gut, und die Hintergrundfarbe hat sich in dieses kräftigere Orange verändert. Mit Prepos haben Sie ziemlich schnell und ohne großen Aufwand die Möglichkeit, Ihre "LESS"-Dateien in CSS zu kompilieren.

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!