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 LESS arbeiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
LESS erweitert die Möglichkeiten von CSS: Es kommen Variablen zum Einsatz und Funktionen und Klassen können ihrerseits wieder Klassen aufrufen.
07:11

Transkript

Wir haben nun Prepos als Wachhund im Hintergrund laufen. Prepos sorgt jetzt dafür, dass eben meine "LESS"-Dateien unter Beobachtung stehen. Wenn es Veränderungen gibt, werden diese durch Prepos auch durchgeführt. Wenn ich das einmal nicht haben möchte, dann reicht hier ein Klick auf dieses kleine Symbol, und mein Projekt pausiert, bzw. die Beobachtung des Projekts pausiert. Ich möchte aber im Moment, dass Prepos seine Arbeit erledigt, und kann nun wieder in mein Aptana wechseln, und mir dort die "LESS"-Dateien ansehen, bzw. Veränderungen durchführen. Ich öffne hier den "less"-Ordner, und Sie sehen, dass es eine große Menge unterschiedlicher "LESS"-Dateien gibt, die eben die Einzelbereiche von "Bootstrap" abdecken. Eine erste Eigenheit von "LESS" im Unterschied zu CSS ist die Möglichkeit, Variablen zu verwenden. Dafür gibt es eine eigene Schaltstelle, unter "variables.less" sind alle Variablen aufgelistet, die dann später in den unterschiedlichen "LESS"-Dateien zum Einsatz kommen können. Das heißt auch für Sie, wenn Sie Veränderungen globaler Natur für das ganze Projekt durchführen wollen, vor allem auch, was die Farbgebung betrifft -- sie dann hier bei den Variablen gut aufgehoben sind. Variablen erkennen Sie daran bei "LESS", dass Sie mit @ am Anfang beginnen, und sie können dann global im ganzen Projekt eingesetzt werden. Eine zweite Eigenart von "LESS" ist die, dass nicht nur Variablen dann gleich zugeordnet werden können, sondern dass es auch die Möglichkeit gibt, Klassen wieder Klassen zuzuordnen. Das heißt, ich habe irgendwo eine Klasse definiert, und kann dann in einer anderen Klasse diese Klasse wieder verwenden. Was noch sehr angenehm ist; "LESS" kann rechnen, was CSS in der Weise ja nicht kann. Hier, wenn wir uns das am Beispiel der Schriftgrößen ansehen, haben wir eine grundlegende Schriftgröße, die ist hier mit 14px angegeben, und dann errechnet mir "LESS" eine weitere Vergrößerung, bzw. Verkleinerung der Schrift. Dazu verwendet es spezielle Rundungstechniken, das eine heißt "cell". "cell" rundet nach oben, das heißt, da wird nach oben hin aufgerundet, und "floor" rundet aufgrund dessen nach unten ab. Das Praktische an dieser Vorgehensweise ist, dass sie einfach nur die "base"-Größe ändern müssten, um gleich für alle anderen Schrifttypen eine vergleichbare Größenänderung zu haben, sodass immer die Schriften alle in sich geschlossen von der Größenstruktur her sind. Dieses Vorgehen zieht sich durch alle "LESS"-Dateien, dass man versucht, möglichst global etwas zu bestimmen, und dann eben lieber kleinrechnet, abrechnet. Sie sehen das auch hier, in einem völlig anderen Zusammenhang, mit den Grautönen. Ich habe eine Grundtönung, das ist in dem Fall schwarz. Die wird dann einfach mathematisch aufgehellt. Was dann als Ergebnis bei diesem Rechenmodell herauskommt, ist eben wieder ein Farbwert. Wenn ich das Ganze jetzt verändern möchte, dann reicht es, dass ich hier bei den Farbwerten einfach meine eigenen Akzente setze. Bin da jetzt mal ziemlich mutig und mache das. Ich habe ein Thema, das mit Bergen, Landschaft und Grün zu tun hat, ich möchte, dass meine Hauptfarbe eben einen Grünton abgibt, Ich wechsle hier, # für einen Farbwert, das wäre in meinem Fall "878179". Das wäre es. Dann werde ich mich auch um einen anderen Hintergrund für den ganzen "body"-Bereich kümmern, Da ist im Moment zwar noch ein kräftigeres Orange drin. Das nehmen wir raus und machen "dfe0d9". Das sollte so ein sanftes Grün sein. Ich speichere mal diese Veränderungen mit dem Wissen, dass im Hintergrund Prepos seine Arbeit macht. Wir sehen uns noch weitere Eigenarten von "LESS" an, wie "LESS" eben mit Dateien umgehen kann. Da haben wir hier als zweites Beispiel die sog. "mixins". "mixins" sind kleine, intensive, Zusammenschlüsse von Informationen. Wenn ich mir das anhand von "grid.less" anschaue, so habe ich es hier mit den grundlegenden Einstellungen für das Grid-System zu tun. Sie merken, was passiert. Das grenzt schon sehr ans Programmieren. Ich habe also eine Klasse, und diese Klasse wird hier genau bestimmt, kann in sich wieder ein Klasse enthalten, bzw. arbeitet mit Variablen. Ich kann dann also später so ein "mixin" einfach aufrufen, und diese Werte mitgeben. Das sorgt seinerseits wieder für einen viel klareren Einsatz von unterschiedlichen Code-Maßnahmen, und führt letztendlich dann für mich, als jemand, der mit "Bootstrap" arbeitet, zu so angenehmen Ergebnissen, wie dass ich einfach nur eine Klasse angeben muss, und mir sicher sein kann, dass im Hintergrund dieser Klasse eben ein riesiges Laufwerk am Arbeiten ist, das dafür sorgt, dass ich die optimalen Enstellungen bekomme. Zu guter Letzt, was noch eine Vereinfachung darstellt, ist die Tatsache, dass Sie bei "LESS" Verschachtelungen machen können. Ich zeige Ihnen das jetzt hier bei der "navs.less". Hier ist es so, dass Sie einzelne Klassen in Elternklassen einbetten können. Hier sieht man das besonders gut, ich habe hier die Klasse ".nav" . Wenn ich jetzt ein Listenelement ("li") innerhalb von ".nav" habe, dann habe ich nicht mehr diese komplizierte Schreibweise, dass ich sagen muss ".nav" und dann "li" und dann ".nav.li" und "a", sondern ich kann das hier eingebettet in das Eltern-".nav"-Element angeben, und bekomme so eine eindeutig bessere Lesbarkeit und bessere Klarheit, und weniger Schreibarbeit noch dazu. Was Sie auch merken, ist, dass vom Prinzip her "LESS" ganz ähnliche Mittel verwendet wie CSS. Es ist ja auch einfach nur eine Erweiterung von CSS. Was aber für Sie eben heißt, dass Sie langsam in diese Arbeit mit "LESS" hineinwachsen können. Wenn Sie vorerst noch Einiges an Elementen verwenden, die Sie so eigentlich nur in CSS verwenden, so ist das überhaupt kein Fehler, weil die zwei ja sehr nahe Verwandte sind.

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!