Fortgeschrittenes CSS: Animationen, Flexbox, SVG, 3D, SASS,…

Hier erfährst du, dass es in diesem Abschnitt um die Umsetzung verschiedener Arten von Animationen wie transitions oder @keyframes mithilfe von CSS in einem Beispielprojekt geht.

In dieser Lektion beginnst du damit das Design der Website für eine Flugschule zu entwickeln: dazu legst du in HTML die Grundstruktur der Seite fest, wobei du semantische Tags wie header und main verwendest. Auch lernst du, wie du in CSS einen sogenannten basic reset durchführst, um einige Design-Einstellungen zurückzusetzen.

Hier siehst du, wie du in CSS mit background-image ein Hintergrund-Bild für eine Website einfügst und die Anzeige via background-cover, background-repeat und background-attachement konfigurierst, sodass das Bild bildschirmfüllend und passend zur Größe des Browserfensters dargestellt wird.

In dieser Lektion lernst du, wie du mit CSS den Seiteninhalt auf einer Website positionieren (mit text-align zentrieren, mit margin und padding Abstände festlegen) und Text formatieren kannst; die Textfarbe mit color, die Schriftart mit font-family anpassen. Weiter lernst du CSS-Eigenschaften wie text-decoration, background-color, display und border-radius kennen, die sich z.B. dafür gut eignen, um einen Button zu gestalten.

Du siehst auch, wie du die Farben in svg-Dateien in CSS umkehren kannst, indem du innerhalb einer svg-Datei die fill-Eigenschaft anpasst.

Hier lernst du die erste Möglichkeit kennen, um in CSS Animationen auszuführen: du kannst, wenn eine CSS-Eigenschaft verändert wird, diesen Übergang mit der transition-Eigenschaft gestalten, etwa die Zeit des Übergangs festlegen - du siehst im Beispielprojekt, wie du das anhand eines hover-Effektes umsetzen kannst.

In dieser Lektion lernst du die transition-timing-function - Eigenschaft in CSS kennen, mit der du den zeitlichen Ablauf einer Animation spezifizieren kannst; dazu zeigt man dir, wie du mit den Funktionen linear, ease-in-out und cubic-bezier deine Animation kontrollierst. Schließlich erfährst du, dass in der Eigenschaft transition Eigenschaften wie transition-property, transition-duration, transition-timing-function und transition-delay gebündelt sind.

In dieser Lektion lernst du die @keyframes -Regel in CSS kennen, mit der du komplexere Animationen selbst entwickeln kannst: dazu legst du einige Zustände von CSS-Eigenschaften fest und lässt dann die Übergänge dazwischen automatisch berechnen. Du siehst anhand eines Beispiels, wie du solche Keyframe-Animationen mithilfe von animation-name, animation-duration, animation-timing-duration, animation-iteration-count, animation-delay und animation-fill-mode auf HTML-Elemente anwenden kannst.

In diesem Video wird dir gezeigt, wie du mit der Kommaschreibweise mehrere Keyframe-Animationen auf ein HTML-Element anwenden kannst. Auch siehst du, wie du die Parameter einer Keyframe-Animation gebündelt in der animation-Eigenschaft spezifizieren kannst und welche Reihenfolge du dabei beachten musst.

Hier erfährst du, wie du in CSS mit der transform-Eigenschaft HTML - Elemente verschieben (translate), rotieren (rotate) und ihre Größe verändern (scale) kannst. Anhand eines Beispiels wird dir verdeutlicht, dass sich die transform-Eigenschaft besonders gut für die Verwendung bei Animationen eignet.

In dieser Lektion werden dir einige Hinweise hinsichtlich den Performances von bestimmten Animationen gegeben: du lernst, dass du Eigenschaften wie font-size, margin-top oder color eher nicht animieren solltest (außer in kleinen Bereichen). Andererseits erfährst du, dass sich Eigenschaften wie transform oder opacity sehr gut für Animationen eignen.

In dieser Musterlösung siehst du, wie du das Flugzeug auf der Flugschulen - Seite animierst: dazu wird die Animation in zwei Phasen unterteilt und in jeweils einer Keyframes-Animation umgesetzt, wobei die transform- und die opacity-Eigenschaften zum Einsatz kommen. Beim Anwenden der Keyframe-Animationen auf das logo - Element wird justiert, damit die Animationen den User nicht vom Seiteninhalt ablenken.

Hier erhältst du einen Überblick über den nächsten Abschnitt, in dem es darum geht, wie du Hintergründe mit CSS gestalten kannst, z.B. ihre Reihenfolge oder Farbverläufe festlegen.

In dieser Lektion lernst du, dass ein HTML-Element verschiedene Arten von Hintergründen besitzen kann: background-color und background-image, wobei erst die Hintergrundfarbe als unterste Ebene angewendet und diese dann ggf. von einem Hintergrundbild überlagert wird. Mit CSS kannst du verschiedene Hintergründe kombinieren, die auf verschiedenen Ebenen übereinander gestapelt liegen, und deren Eigenschaften du mit background-size, background-repeat, background-attachment oder background-position spezifizierst. Schließlich erfährst du, wie du diese Eigenschaften in der background-Eigenschaft kompakt bündeln kannst.

In dieser Lektion lernst du sogenannte CSS Gradients kennen, mit denen du Farbverläufe z.B. für Hintergrundbilder, Hover-Buttons oder Einfärbungen von Schriften generieren kannst, wobei solche Farbübergänge als background-images gelten. Für die Umsetzung wird dir hier die linear-gradient - Funktion gezeigt.

In diesem Video siehst du, wie du mehrere Gradients in CSS überlagern kannst, indem du für die einzelnen Farben mit rgba über den Alphakanal einen Transparenzwert festlegst. Weiter lernst du, wie du Gradients auch rotieren und mit ihnen harte Farbkanten realisieren kannst.

Hier werden dir zwei Aufgaben vorgestellt: mit linear-gradient sollst du einen 3D - Effekt für einen Button umzusetzen sowie ein Hintergrundbild abdunkeln. Als Bonusaufgaben kannst du noch die Deutschland-Fahne und das Logo vom roten Kreuz modellieren.

In dieser Musterlösung wird dir gezeigt, wie du mit dem linear-gradient als background-image einen 3D-Effekt für einen Button umsetzt. Weiter siehst du, wie du mit dem Alphakanal von rgba ein background-image abdunkeln kannst, um eine darüberliegende Schrift besser lesbar zu machen. Schließlich wird noch die Deutschland-Fahne unter Verwendung von harten Farbkanten gestaltet sowie das rote Kreuz - Logo mit zwei übereinander gelegten Gradients, deren teilweise Transparenz ausgenutzt wird.

In dieser Lektion lernst du, wie du einen via linear-gradient generierten Farbverlauf als Texthintergrund verwenden kennst, indem du die background-clip bzw. -webkit-background-clip - Eigenschaft benutzt und die color - Eigenschaft auf transparent setzt.

Hier erfährst du, wie du Anzeigefehler bei der Verwendung von modernen CSS-Features abfangen kannst, wenn ein Browser diese nicht unterstützen sollte. Dazu wird dir die @supports - Regel vorgestellt, womit du prüfst, ob ein Browser eine bestimmte CSS-Eigenschaft unterstützt und sonst die CSS-Anweisungen überspringt.

In dieser Lektion lernst du die Funktion radial-gradient in CSS kennen, mit der du kreisförmige bzw. elliptische Farbverläufe generieren kannst. Du siehst wie du solche dann mit den Eigenschaften background-image, background-size und background-repeat als Hintergrundbild konfigurieren kannst.

In diesem Video wird dir gezeigt, wie du das Hintergrundbild in dem Projekt der Flugschule-Website abdunkelst, indem du über ein background-image einen via linear-gradient oder radial-gradient generierten, transparenten Farbverlauf legst. Im Zuge dessen lernst du auch noch die text-shadow - Eigenschaft kennen, womit du eine Schrift auf abgedunkelten Hintergrund nochmal stärker hervortreten lässt.

Hier werden dir zunächst verschiedene Pseudo-Klassen wie hover und active gezeigt. Dann wird dir der Plan vorgestellt, einen Animationseffekt für einen Button in CSS umzusetzen: statt ein Hintergrundbild zu animieren, wird ein via radial-gradient generierter Farbverlauf als background-image gesetzt und dann die Vergrößerung der background-size animiert.

In diesem Video animierst du durch die Veränderung der background-size - Eigenschaft beim Klick auf den Button einen Zoom-Effekt, den du mit der transition - und der transition-duration - Eigenschaft konfigurieren kannst.

In dieser Lektion wird die Animation des Buttons abgeschlossen, indem noch einige Eigenschaften wie die background-size, transition - Effekte und die Farbe vom background-image spezifiziert werden.

In dieser Übersicht erfährst du, welche Grundlagen von CSS im Rahmen dieses Abschnitts behandelt werden; z.B. wie CSS eingelesen und vom Browser verarbeitet wird und wie CSS-Regeln angewendet werden (bei widersprüchlichen Regeln).

In dieser Lektion lernst du anhand eines Schaubildes und einer Beispielseite die Render-Pipeline einer Website kennen, also wie eine Webseite im Browser angezeigt wird. Dabei wird insbesondere auf die Baumstruktur von HTML-Seiten, das sogenannte document object model (DOM) bzw. das CSS object model (CSSOM) eingegangen und dir wird vorgestellt, wie in den Render-Schritten Layout, Paint und Composite jeweils der Render-Tree verarbeitet wird.

Hier werden zunächst die Begriffe der CSS-Selektoren und CSS-Deklarationen wiederholt. Anschließend lernst du, dass bei mehreren im Widerspruch zueinander stehenden CSS-Regeln, die anzuwendende Regel anhand von 1.) Wichtigkeit, 2.) Spezifität und 3.) Platzierung im Quellcode ermittelt wird. Dir wird gezeigt, wie sich die Wichtigkeit einer CSS-Regel aus den Standardwerten von Browser, dem user agent stylesheet, den CSS-Deklarationen der Webseite sowie der Verwendung vom Schlüsselwort !important berechnet wird.

In diesem Video wird dir gezeigt, wie die Spezifität von CSS-Selektoren anhand vom 1.) Inline Style, 2.) der Anzahl der IDs, 3.) der Anzahl der Klassen-, Pseudoklassen und Attribute sowie 4.) der Elemente und Pseudo-Elemente berechnet wird - allgemein und anhand von diversen Codebeispielen. Du erfährst auch, dass bei identischer Spezifität von sich widersprechenden CSS-Regeln die Reihenfolge im Quellcode darüber entscheidet, welche der Regeln angewendet wird. Dabei lernst du auch den Stern - Selektor * kennen, mit dem du alle Elemente auf der Seite ansteuerst. Schließlich wird dir zusammenfassend dazu geraten auf !important und inline styles nach Möglichkeit zu verzichten und im Rahmen einer best practise die Spezifität von CSS-Selektoren auszunutzen.

Hier lernst du, wie CSS-Regeln vererbt werden und wie du die Werte von Eigenschaften mit initial zurücksetzen kannst. Auch wird dir gezeigt, wie du in den entsprechenden CSS specs nachschauen kannst, ob eine Eigenschaft vererbt wird oder nicht. Schließlich erfährst du, wie du mit inherit dafür sorgen kannst, dass eine CSS-Regel vererbt wird.

In dieser Lektion lernst du, wie du die Schriftgröße eines HTML-Elementes font-size festlegen kannst: in Pixel, in em (d.h. im Verhältnis zur Schriftgröße des Parent-Elements), in rem (relativ zur Schriftgröße des <html>-Elements) oder in Prozent % (bezüglich der Standard-Schriftgröße vom Browser). Dabei wird hier insbesondere auf die Verwendung von relativen Schriftgrößen eingegangen, z.B. wie diese vererbt werden.

In diesem Video werden verschiedene Elementtypen in HTML gegenübergestellt: inline - Elemente (stehen im Textfluss), inline-block - Elemente und block - Elemente. Dir wird anhand eines Beispiels gezeigt, dass Elemente je nach Typ über bestimmte Eigenschaften verfügen oder nicht (z.B. besitzen reine inline - Elemente keine margin-top - oder width - Eigenschaft). Auch lernst du, wie du mit der display - Eigenschaft den Elementtyp wechseln kannst.

In dieser Lektion lernst du, wie du die Größe und Abstände von HTML - Elementen spezifizieren kannst:

• in Pixel (Größe direkt angeben)

• in Prozent % (in Bezug auf die Größe des Parent-Elements)

• in em bzw. rem (relativ zur Schriftgröße vom aktuellen Element bzw. zum <html>-Element)

• in vw & vh (im Verhältnis zur Größe des viewports, d.h. der Anzeige im Browser)

Anhand von Beispielen wird dir gezeigt, wie du diese verschiedenen Maßeinheiten in der Praxis einsetzen kannst; dabei siehst du, wie du durch die konsequente Verwendung von rem ein responsives Design herstellst.

In diesem Video zeigt man dir die verschiedenen Bereiche von block - Elementen: content (Inhalt), padding (Innenabstand), border (Rahmen) und margin (Außenabstand). Du wirst auf Probleme bei Verwendung verschiedener Maßeinheiten bei HTML-Elementen hingewiesen und wie du diese durch die Anpassung der box-sizing - Eigenschaft lösen kannst, indem du von der Standardeinstellung content-box zu border-box umschaltest.

Hier erfährst du, dass man bei einem responsiven Design die korrekte Darstellung einer Webseite geräteübergeifend (PC, Tablet, Smartphone) zu gewährleisten versucht. Dabei unterscheidet man zwischen einem mobile first - und einem Desktop first - Ansatz. Nützlich hierfür sind @media - queries, mit denen man CSS-Regeln steuern kann; z.B. bestimmte Regeln nur ausführen, wenn der Browser eine bestimmte Breite über- oder unterschreitet.

In dieser Lektion wird dir gezeigt, wie du @media - queries in CSS verwendest. Dir wird die Aufgabe gestellt, mit @media - queries dafür zu sorgen, dass Karten auf schmalen Bildschirmen nicht mehr nebeneinander, sondern untereinander angezeigt werden.

In dieser Musterlösung siehst du, wie du mit @media - queries HTML-Elemente in einer breiten Desktop-Darstellung nebeneinander und bei einer schmaleren Smartphone-Darstellung untereinander anzeigen lassen kannst. Dir wird gezeigt, wie du das sowohl in einem desktop first - als auch einem mobile first - Ansatz realisierst.

Hier erfährst du, dass du in diesem Abschnitt die Block Element Modifier - Schreibweise kennen lernen und anfangen wirst den header - Bereich vom Praxisprojekt zu entwickeln.

In dieser Lektion lernst du die Block Element Modifier (BEM) - Notation kennen, mit der Klassennamen strukturiert vergeben werden können. Dazu wird eine Seite in verschiedene Blöcke aufgeteilt; Klassen von Elementen in einem solchen Block werden durch zwei Unterstriche gekennzeichnet (block__element) und durch zwei Bindestriche wird angezeigt, dass eine entsprechende Klasse abgeändert wird (block__element--updated). Weiter versucht man komplexe Selektoren zu vermeiden.

In diesem Video wird das background-image für den header gesetzt und konfiguriert. Du siehst, wie du mit einem linear-gradient das Hintergrundbild teilweise abdecken kannst und mit einer background-size bezüglich dem viewport für ein responsives Design sorgst. Schließlich zeigt man dir auch, wie du "Stufen" an einer Kontur glätten kannst.

Hier erfährst du, wie du die Navigationsleiste mit HTML und CSS umsetzt. Dazu wird ein container - div - Element eingeführt, in dem eine Liste mit den Menüpunkten angelegt wird. Diese HTML-Liste wird dann in CSS unter Verwendung der block element modifier - Notation mit Eigenschaften wie text-decoration, border-bottom und display gestylt.

In dieser Lektion lernst du, dass sowohl HTML als auch das Bildformat SVG (für Vektorgrafiken) auf der Auszeichnungssprache XML basieren. Deshalb kannst du eine SVG-Datei nicht nur als img - Element auf einer Seite einbinden, sondern auch direkt SVG-Code in einer HTML-Datei platzieren. Schließlich zeigt man dir, wie du nach dem Einfügen SVG-Code noch "aufräumst".

In diesem Video siehst du, wie du ein SVG-Element mit CSS konfigurieren kannst und einen hover - Effekt für das Logo umsetzt. Dabei kommt wieder die Block Element Modifier (BEM) - Notation zum Einsatz und du lernst das Schlüsselwort currentColor kennen, mit dem du die Farbe von außen steuern kannst.

In dieser Lektion siehst du, wie du einen Menübutton umsetzt. Dazu baust du wieder ein Design als SVG direkt in deinen HTML-Code ein. Dann wird eine icon-Klasse eingeführt, um alle Icons auf der Seite einheitlich mit CSS stylen zu können. Auch siehst du, wie du Icons mit vertical-align passend im Textfluss positionierst.

Hier wird vertieft, wie du mit der vertical-align - Eigenschaft Texte- und Bilder vertikal bezüglich der Grundlinie des parent - Elements ausrichten kannst. Dir werden die wichtigsten Werte für vertical-align wie baseline, text-top, text-bottom oder middle vorgestellt.

In diesem Video werden erst die passenden Schriftarten ausgewählt sowie via Google Fonts eingebunden und dann die Abstände in der Navigationsleiste mittels Modifier-Klassen umgesetzt.

Hier lernst du, wie du die Überschrift im header setzt und mit Eigenschaften wie text-transform, line-height sowie letter-spacing konfigurierst.

In diesem Überblick erfährst du, dass du in diesem Abschnitt mehr darüber lernen wirst, wie du HTML - Elemente positionieren kannst, um etwa mithilfe von CSS Schrift teilweise von Bildern überlagern zu lassen.

In dieser theoretischen Lektion lernst du die position - Eigenschaft in CSS kennen, mit der du Elemente relativ zu ihrer normalen Position (relative), bezüglich des viewports (fixed), als Mischung aus beiden (sticky) oder aus dem Textfluss herausgehoben und im Bezug zum parent - Element (absolute) anordnen kannst. Anhand von Beispielen werden dir dann die verschiedenen Werte für position in Aktion gezeigt und dabei auch, wie du die Position eines Elements mit Eigenschaften wie top konfigurieren kannst.

In diesem Video lernst du den sogenannten z-index in CSS kennen, mit dem du festlegst, in welcher Reihenfolge Elemente angezeigt werden. Du siehst bei einem Beispiel mit mehreren Icons, wie du so mit einem absolute - positionierten Element ein anderes (z.B. relative - positioniertes) Element überlagern kannst. Anschließend erhältst du die Aufgabe, das Positionieren von Elementen mittels z-index - Eigenschaft anhand von einem kleinen Beispiel zu üben.

In dieser Musterlösung siehst du, wie du mithilfe von CSS eine Überschrift, eine Beschreibung und ein Icon auf einem Hintergrundbild positionierst, indem du ihre position - Eigenschaften jeweils auf absolute setzt und diejenige in der container-Klasse des Hintergrundbildes auf relative sowie die Zeichenreihenfolge per z-index steuerst.

In diesem Video wird eine teilweise transparente Version des Hintergrundbildes in die Webseite eingebaut. Dabei erfährst du, dass das WebP - Format wegen der Komprimierung für transparente Bilddateien hier besser geeignet ist als das PNG-Format.

Hier siehst du, wie du mithilfe der position - Eigenschaft das teilweise transparente WebP-Bild passgenau über das JPG-Hintergrundbild legst.

In dieser Lektion wird dir gezeigt, wie du das überlagernde WebP-Bild bündig am unteren Rand des relative - positionierten JPG-Hintergrundbildes ausrichtest. Dazu setzt du die position-Eigenschaft des headers auf relative und verwendest die bottom - Eigenschaft der beiden absolute - positionierten, sich überlagernden Bilder. Schließlich lernst du, wie du den passenden height - Wert (in vw) für das überlagernde WebP-Bild berechnen kannst, sodass die Überschrift nicht mehr als nötig verdeckt wird.

In diesem Video siehst du, wie die beiden sich überlagernden Bilder weiter ausgerichtet werden: Du lernst die CSS - Eigenschaft overflow kennen, mit der du hier ein über den header hinausragendes Bild abschneiden kannst. Schließlich siehst du, wie du einen Schriftzug mittels z-index über den Bildern platzierst, wobei du darauf achten musst, die position-Eigenschaft zu setzen.

Hier wird die via linear-gradient erzeugte Schräge auf den beiden sich überlagernden Bildern wiederhergestellt. Dazu wird ein neues div - Element mit der Klasse header__slope eingeführt, indem sich als background-image der linear-gradient befindet und das via z-index oberhalb von den anderen Bildern platziert wird.

Zum Abschluss lernst du, wie du auf einige divs (bzw. allgemeiner HTML-Elemente) sogar gänzlich verzichten kannst, indem du in CSS sogenannte Pseudoelemente in Form von element::before bzw. element::after verwendest (wobei du dann jeweils noch die content -Eigenschaft setzen musst).

In dieser Lektion lernst du einige Tools kennen, mit der du für ein responsives Design für die Webseite sorgen kannst. Zuerst wird dir das viewport - meta-tag für den head-Bereich deines HTML-Dokuments vorgestellt. Danach siehst du, wie du im Webinspektor von Chrome die device toolbar einschaltest und so die Darstellung der Webseite auf verschiedenen Smartphones überprüfen kannst, was das Debuggern deutlich erleichtert. Dabei wird dir die min-height - Eigenschaft gezeigt, mit der du Randfälle von breiten Bildschirmen abfangen kannst. Schließlich erfährst du noch, dass du mit der calc - Funktion in CSS verschiedene Einheiten miteinander verrechnen kannst.

In dieser Musterlösung wird damit angefangen, nach dem Prinzip von Desktop First, ein responsives Design für die Webseite umzusetzen. Dazu können entweder verschiedene @media - queries verwendet werden, um an bestimmten breakpoints die CSS-Regeln anzupassen, oder die calc - Funktion benutzt werden, um Werte für die verschiedenen Bildschirmgrößen entsprechend auszurechnen. So kann nach einigem Herumprobieren die Darstellung der Webseite für breite Bildschirme optimiert werden.

Im zweiten Teil der Musterlösung wird die Anzeige der Webseite auch für schmale Bildschirme (insbesondere Tablets) optimiert. Dazu wird hier eine passende min-height mit der calc - Funktion berechnet und zusätzlich eine @media-query eingefügt, sodass CSS-Regeln automatisch nach Bildschirmgröße angepasst werden.

Im letzten Teil der Musterlösung wird die Anzeige der Webseite auch für Smartphones optimiert. Dazu wird u.a. die Navigationsleiste mithilfe von einer @media-query ausgeblendet und für schmale Displays der Überlagerungseffekt bei der Überschrift abgeschaltet.

In diesem Ausblick erfährst du, dass es in diesem Abschnitt u.a. darum geht, wie du Schriftarten lokal einbinden kannst und du siehst, dass du in CSS auch die Schriftdicke animieren kannst.

In dieser Lektion lernst du die Vorteile davon kennen, Schriftarten selbst einzubinden (Datenschutz!), und dir werden die verschiedenen Formate für Schriftarten vorgestellt; wie TTF, WOFF und WOFF2. Auch erfährst du, dass bei sogenannten variable fonts in einer Datei alle Schriftdicken erklärt sind – was Animationen bei der Schriftdicke erst ermöglicht.

Hier wird dir gezeigt, wie du eine Schriftart von Google Fonts auswählst, wobei du dir unter Glyphs alle in der Schriftart enthaltenden Zeichen anzeigen lassen kannst.

Anschließend siehst du anhand von einem Beispiel, wie in CSS inmitten von @font-face – Blöcken neue Schriftarten definiert werden. Dabei lernst du u.a. die unicode-range – Eigenschaft kennen.

In diesem Video wird dir gezeigt, wie du mit einem @font-face – Block in CSS eine eigene Schriftart konfigurierst, wobei du die heruntergeladene TTF – Datei für eine variable font über das src – Attribut einbindest. Auch siehst du, wie du die neue Schriftart für einen bestimmten Bereich von font-weight – Werten einsetzt.

Hier wird dir die font-weight – Eigenschaft vorgestellt. Du erfährst, dass du diese nur bei bestimmten Schriftarten animieren kannst und siehst, dass du die Animation der Schrift in diesem Fall wieder als @keyframes – Animation umsetzen kannst.

In dieser Lektion lernst du, dass du die Schriftanimation noch dadurch optimieren kannst, dass du statt TTF-Dateien das Format WOFF2 verwendest. Du erfährst, dass du unter Unix mit dem WOFF2 – Tool von google Dateien entsprechend konvertieren/komprimieren kannst.

In dieser Übersicht erfährst du, dass es sich bei SASS / SCSS um ein Tool handelt, um übersichtlicheren CSS – Code zu schreiben; insbesondere kann man damit auch CSS – Code auf verschiedene Dateien aufteilen, wodurch die Entwicklung von komplexeren Website-Projekten ermöglicht wird.

Hier werden dir die Motivationen hinter SASS / SCSS vorgestellt: einerseits längeren CSS – Code besser zu organisieren; ohne mehrere Dateien einzubinden, was nämlich zu längeren Ladezeiten führen könnte. Andererseits führen die Möglichkeiten, CSS – Regeln zu verschachteln oder wieder verwendbare Funktionen zu schreiben, für übersichtlicheren Code.

Schließlich siehst du noch anhand eines Beispiels, wie SCSS in CSS umgewandelt wird und die Unterschiede in der Syntax zwischen SCSS (geschweifte Klammern notwendig) und SASS (Einrückungen notwendig).

In dieser Lektion wird dir gezeigt, wie du SASS installierst und wie du eine SCSS – Datei in Visual Studio Code in CSS – Code umwandelst.

In diesem Video erfährst du, wie du die sass.bat – Datei zu deiner Umgebungsvariablen PATH hinzufügst, um SCSS – Code mit dem Befehl sass komfortabler kompilieren zu können. Auch siehst du, wie du mit der --watch Konfiguration Änderungen in SCSS automatisch kompilieren lassen kannst.

In dieser Lektion wird dir anhand von verschiedenen Beispielen gezeigt, wie du mit SCSS mehrere Selektoren verschachteln und somit kombinieren kannst – selbst media queries! Dabei wird dir auch die Bedeutung vom parent selector & erklärt.

Hier siehst du, wie du den parent selector & auch bei der BEM – Schreibweise einsetzen und durch geschickte Verschachtelung von Selektoren übersichtlichen SCSS – Code schreiben kannst.

In diesem Video wird dir gezeigt, wie du SCSS – Code in verschiedene Dateien strukturieren kannst und wie du in einer SCSS – Datei mit dem @use – Befehl weitere SCSS – Dateien einbinden kannst. Schließlich wird auf die source map .css.map eingegangen, dank der im Webinspektor auch angezeigt wird, in welcher SCSS – Datei eine bestimmte CSS – Regel definiert worden ist.

In dieser Lektion wirst du angewiesen, relative Pfade (z.B. in url) im SCSS – Code bezüglich des Ausgabeordners der kompilierten CSS – Datei anzugeben und dich dabei nicht von der Autovervollständigung in die Irre führen zu lassen.

Hier lernst du die best practice kennen, in jedem Ordner mit SCSS – Dateien eine _index.scss – Datei anzulegen, damit du per @use komfortabler nur die Ordner und nicht die einzelnen SCSS – Dateien in den Ordnern einzubinden brauchst.

In diesem Video wird dir eine Ordnerstruktur für dein SASS – Projekt vorgeschlagen:

• /abstracts für Mixins, Funktionen und Platzhalter

• /base für grundsätzliche Styles

• /components für kleinere Komponenten wie Buttons oder Formulare

• /layout für das allgemeine Layout

• /pages für Features von speziellen Seiten

• /themes für verschieden Themes

• /vendors für das Laden von CSS – Code von anderen Projekten (z.B. Bootstrap)

Von der main.css – Datei aus wird alles geladen

Hier wirst du darauf eingestimmt, dass du in diesem Abschnitt das Webseite – Projekt mit SASS restrukturieren wirst, um bei den kommenden komplexeren Bereichen der Anwendung die Übersicht bewahren zu können.

In diesem Video wird dir die Aufgabe gestellt, den bisherigen CSS – Code aus dem Kurs in SCSS – Code umzuschreiben und passend zur vorgegebenen Grundstruktur in verschiedene Ordner aufzuteilen.

In dieser Lektion siehst du, wie ein Refactoring von CSS am Beispiel des Kursprojektes praktisch abläuft, um eine modulare Projektstruktur herzustellen.

Bei diesem Teil des Refactorings von CSS wird dir u.a. gezeigt, wie du in SCSS mehrere Selektoren zusammenfügen kannst sowie media queries auflösen und in einen Selektor hinziehen kannst und ihn somit verschachtelst, statt ihn wiederholen zu müssen. Du siehst, wie sich durch die Umstellung von CSS auf SCSS dein Code verkürzt, obwohl er funktional äquivalent ist.

In der finalen Lektion zum Refactoring des CSS – Codes siehst du u.a. wie du den parent selector & von SCSS in Verbindung mit Block Element Modifiern einsetzen kannst.

In diesem Überblick erfährst du, dass es in diesem Abschnitt um Variablen in SASS geht; u.a. wie du damit Farben abändern und Variablen in eine Konfigurationsdatei auslagern kannst.

In diesem Video lernst du, dass du in SASS bzw. SCSS Variablen mit der $ – Schreibweise definieren kannst. Dann siehst du anhand eines Beispiels, wie du damit die Werte von CSS – Eigenschaften, z.B. Farben, auslagern und komfortabel über den Variablennamen wiederverwenden kannst. Dir wird auch gezeigt, wie du Variablen insbesondere dann sinnvoll einsetzen kannst, wenn Werte voneinander abhängen.

Hier erfährst du, dass SASS – Variablen, je nachdem wo im Code sie definiert werden, einen bestimmten Gültigkeitsbereich (scope) aufweisen. Daher unterscheidet man globale und lokale Variablen.

In dieser Lektion lernst du das Modul sass:color kennen: Dir wird gezeigt, wie du mit der Funktion adjust aus dem color – Modul Farben anpassen kannst und du erfährst, dass der lightness – Parameter den Hellwert einer Farbe angibt.

In diesem Video geht es darum, wie Farben im HSL – Farbmodell repräsentiert werden; dazu lernst du neben lightness die weiteren Parameter hue (Farbwert) und saturation (Farbsättigung) kennen.

Hier erfährst du, dass in SASS mixins Funktionen in Programmiersprachen entsprechen. Dir wird gezeigt, wie du mixins definierst und Standardparameter setzt sowie mixins mit dem @include – Befehl an verschiedenen Stellen einsetzen kannst. Anhand von Beispielen siehst du, wie du mit mixins deinen SASS – Code vereinfachen kannst.

In dieser Lektion lernst du den @extend – Befehl kennen, mit dem du einen Selektor nachträglich noch erweitern kannst – anders als bei mixins werden die Regeln eingesetzt, aber nicht kopiert!

Anhand eines Beispiels wird verdeutlicht, dass du diesen Befehl bei der BEM – Schreibweise in der Regel nicht benötigst.

Auch wird dir der placeholder Selektor % in SASS gezeigt, mit dem du dafür sorgst, dass ein Selektor nicht in der kompilierten CSS auftaucht, sondern nur diejenigen Selektoren, die ihn via @extend erweitern.

Hier erfährst du, wie du in SASS bzw. SCSS Variablen und mixins auslagern und mit dem @use – Befehl in einem Namespace laden kannst. Schließlich erfährst du auch, dass private Variablen mit einem Bindestrich - beginnen und du auf diese von außerhalb ihrer Datei nicht zugreifen kannst.

In diesem Video lernst du, wie du mit dem @forward – Befehl die Inhalte von Konfigurationsdateien gebündelt, d.h. alle in der Datei befindlichen Variablen, und in dem aktuellen Namespace einbinden kannst.

In dieser Lektion siehst du, dass du mit default! den Standardwert für eine SASS Variable setzen kannst. Weiter erfährst du, wie du mit with Module konfigurierst, also Variablen überschreiben kannst.

Hier lernst du den mittlerweile veralteten @import – Befehl (deprecated!) kennen, mit dem früher in SASS bzw. SCSS andere Dateien eingebunden wurden. Damit werden sämtliche Variablen, mixins und Funktionen global sichtbar gemacht, wodurch Anwendungen unübersichtlich werden.

In dieser Lektion wird dir gezeigt, wie du die in diesem Abschnitt besprochenen Konzepte für das Kurs-Projekt anwendest: insbesondere Variablen einzuführen, in einen abstracts – Ordner auszulagern und einzubinden.