One-Page-Webseiten mit Bootstrap, LESS und Sass

Clientseitiges LESS

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Um direkt im Browser LESS-Dateien interpretieren zu können, gibt es eine eigene JavaScript-Datei.
06:17

Transkript

LESS ist ein sogenannter Präprozessor für CSS. Die Aufgabe von LESS besteht darin, den Funktionsumfang von CSS zu erweitern. LESS ist damit nicht der einzige Präprozessor, den es gibt, aber einer der eher bekannteren, vor allem auch eher beliebteren. Bootstrap ist prinzipiell mit LESS geschrieben, das heißt, LESS-Dateien sorgen für das Aussehen, und erst durch das Kompilieren wird dann aus diesen LESS-Dateien eine CSS-Datei. Aber man kann LESS auch client-seitig verwenden. Das macht auch einen Teil seiner Beliebtheit aus, denn zum Testen ist es sehr praktisch, wenn man ohne großen Aufwand schnell mithilfe einer JavaScript-Datei die LESS-Einstellungen durchtesten kann, bevor man eben kompiliert. Rein theoretisch können alle neuen Browser auch schon selbst LESS-Dateien interpretieren, allerdings die älteren noch nicht. Wenn Sie diese ganze Last der Entscheidung den Browsern Ihrer Klienten überlassen, laufen Sie Gefahr, dass viele Klienten mit älteren Browsern Ihre Seite nicht richtig sehen können. Ich bin hier auf der deutschsprachigen Seite von lesscss, und habe zwar hier einen Download-Link, werde den aber nicht verwenden, weil die Version eine ältere ist. Das, was mich aber sehr wohl interessiert, und was ich Ihnen ans Herz lege, falls Sie sich genauer mit LESS auseinandersetzen wollen, haben Sie hier eine kleine, feine Einführung ins Thema auf deutsch. Hier unten auch noch Hinweise für die client-seitige Verwendung. Ich wechsle jetzt aber zur englischsprachigen Seite, lesscss.org. Hier haben Sie unter der Client-side usage die Möglichkeit, Get Less.js sich herunterzuladen. Ich klicke also hier auf den Button, und werde weitergereicht zu dieser minimierten JavaScript-Datei, die ich mit Strg+A markiere, mit Strg+C hole ich mir den Inhalt in die Zwischenablage, und wechsle jetzt zurück in mein Bootstrap-Verzeichnis. Diese JavaScript-Datei möchte ich hier in meinem JavaScript-Ordner unterbringen. Ich werde mit der rechten Maustaste draufklicken, wähle "New File", und mein neuer File heißt "less.min.js". Mit Finish erstelle ich mal diese Datei, die noch nichts enthält, aber mit Strg+V hole ich mir die entsprechenden Inhalte aus meiner Zwischenablage. Das ist jetzt alles nicht gut lesbar, muss es auch nicht sein, es ist ja minimiert. Ich speichere das Ganze mit Strg+S, und schließe es mal wieder. Es ist nur dazu da, um mir beim Interpretieren der LESS-Dateien zu helfen. Das, was ich jetzt noch machen muss, ist hier meinen Verweis auf das Stylesheet natürlich anpassen. Ich sehe mir das Ganze nochmal auf meiner deutschen LESS-Seite an, Ich habe hier einerseits den Verweis auf das Stylesheet, mit Strg+C kopiere ich mir auch das, und übertrage es hier anstelle meines bisherigen Stylesheets, mit Strg+V füge ich es ein. Muss jetzt allerdings noch den Namen meines Stylesheets, und auch den Ort anpassen. Denn alle meine Dateien liegen ja in meinem LESS-Ordner. Die Datei, auf die es dabei ankommen wird, ist bei mir bootstrap.less. Damit das Ganze interpretiert werden kann, muss ich mir noch genauso, und das hole ich mir hier, mit diesem zweitem Bereich, im Header diese JavaScript-Datei einfügen. Strg+C hole ich es mir wieder, und trage es hier unten ein, mit Strg+V. Diese Datei sorgt jetzt dafür, dass diese LESS-Dateien interpretiert werden können. Sie fragen sich vielleicht, warum bei all diesen vielen unterschiedlichen LESS-Dateien mir ausgerechnet diese eine hier reicht, um interpretiert zu werden. Das liegt daran, wenn wir uns bootstrap.less ganz schnell anschauen, dass diese LESS-Datei eigentlich nur aus Importen der anderen Dateien besteht. Das ist sehr praktisch, denn jetzt habe ich hier lauter kleine Häppchen, die von ihrer Namensgebung her schon sehr selbstredend sind, und letztendlich dann nur eine Ausgabe in meiner Index-Datei. Ich speichere mir jetzt mal meine Index-Datei, hier muss ich noch eine Anpassung machen. Auch da ist es so, dass der Ordner bei mir ein JavaScript-Ordner ist, und dass ich jetzt da drinnen aber eine less.min.js habe. Aber jetzt sollte das Ganze mal passen. Ich speichere es mit Strg+S, und werde jetzt einen Versuchsballon starten. Und zwar werde ich die Hintergrundfarbe verändern, das schaffe ich mit variables.less. Ich öffne mir die mal, und ohne dass ich Ihnen jetzt schon genauer sage, was hier passiert, wie der Name schon sagt, hier geht es um Variablen, das heißt, ich kann in LESS mit Variablen arbeiten, und eine der Variablen betrifft die Hintergrundfarbe meines bodies. Die ist im Moment noch weiß. Nur damit wir sehen, ob das Ganze funktioniert hat, werde ich hier jetzt die Farbe auf ein zartes Grün ändern, Der Wert dafür wäre dfe0d9. Ich speichere das Ganze, wechsle wieder in meine Index-Datei, und sehe mir das Ganze in meinem Browser an. Tatsächlich, es hat zwar eine kurze Zeit zum Umschalten gebraucht, aber das Einbinden von LESS bei mir im Header hat funktioniert, und so kann ich nun mit LESS arbeiten, und mir das Ganze testhalber dann immer schon im Browser auch ausgeben lassen.

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!