SASS
Ausbildungsinhalt
Demosektion der SASS Webseite auf einem schwebendem iPad Mockup

SASS

Web • 2015

Diese Online-Präsentation über die dynamischen Style-Möglichkeiten der CSS-Abwandlung "SASS" entstand im Rahmen meiner Ausbildung im Jahr 2015.

Aufgabenstellung

Die Aufgabenstellung unseres Online-Dozenten im ersten Ausbildungsjahr war, nach unterschiedlichen Website-Frameworks zu recherchieren, sich diese gegenseitig vorzustellen und den Umgang damit zu erlernen.

Setupsektion auf einem schwebendem Samsung Galaxy Mockup
Setupsektion auf einem Samsung Galaxy Mockup

Ziel

Das Ziel war es, dass wir uns untereinander etwas über häufig benutzte Online-Frameworks (wie z. B. Bootstrap) beibringen und gegenseitig erklären können, um diese in zukünftigen Aufgabe praktisch anwenden zu können.

Startsektion auf einem Samsung Galaxy Mockup

Recherche & Vorüberlegungen

Die Umsetzung begann für mich mit der Recherche nach einem passenden Framework, von dem ich den Eindruck hatte, dass ich dieses selbst in einem zukünftigen Projekt einsetzen würde.

Bei meinen Recherchen danach habe ich relativ schnell festgestellt, dass viele der Stylesheets innerhalb der Frameworks nicht die gewohnte Dateiendung “.css” hatten, sondern “.sass”, ".scss” oder “.less”.
Beim Austausch mit meinen Mitauszubildenden darüber stellte ich schnell fest, dass das nicht nur auf die Frameworks zutraf die ich mir heruntergeladen habe, sondern dass viele Styles in vielen Frameworks in einer dieser drei Sprachen verfasst waren, und keiner von uns damit umzugehen wusste.

An dieser Stelle sah ich eine Chance für ein interessantes Thema in meiner Framework-Präsentation.

Screenshot des SASS Codes für die Startsektion
Screenshot des SASS Codes für die Startsektion

Umsetzung

Somit begann ich, über diese Dateiendungen & deren Bedeutung zu recherchieren, wobei ich relativ schnell fest stellte, dass es sich bei den Dateiendungen um kompiliertes CSS handelte – Eine Art komprimierte CSS-Datei.

Kompilierte CSS-Dateien bietet u.a. die Vorteile, Farben, Schriftarten o.ä. mit Variablen festlegen und einfacher austauschen zu können sowie erweiterte mathematische Funktionen innerhalb der Styles.

Um mich mehr mit SASS und den Vorteilen auseinandersetzen zu können, habe ich mich nach Rücksprache mit meinem Dozenten dazu entschieden, SASS zu meinem "Framework-Thema" zu machen.
Daraufhin habe ich innerhalb kurzer Zeit den Umgang mit SASS erlernt, indem ich eine Webseite über SASS in HTML & SASS geschrieben habe.

Mit dieser Präsentationswebseite habe ich meinen Mitauszubildenden erklärt, was SASS ist & wofür die Abkürzung steht, welche kompilierten CSS-Formate es insgesamt gibt, wo die Unterschiede liegen, wie man SASS anwendet, wie man damit eine Webseite stylet, und wo die Vor- & Nachteile vom kompiliertem CSS liegen.
Zudem hatte ich die Gelegenheit, meine eigenen Erfahrungen & Erkenntnisse mit SASS mitzuteilen.

Pro und Contrsektion auf einem Samsung Galaxy Mockup
"Pro und Contra"-Sektion auf einem Samsung Galaxy Mockup

Feedback

Das Feedback der Mitauszubildenden und Dozenten zur Präsentation und über die Webseite viel durchweg positiv aus.

Durch mein bei der Recherche & Umsetzung gewonnenes Wissen, konnte ich den Mitauszubildenden Mediengestaltern im Laufe Ihrer Recherche über Frameworks & im Nachhinein, beim praxisnahen Einsatz dieser Frameworks im Rahmen weiterer Ausbildungsprojekte, behilflich sein.

SASS-Sektion auf einem schwebendem Samsung Galaxy Mockup

Fazit

Bei meinen Recherchen & der praktischen Anwendung von SASS, habe ich gelernt, dass SASS, SCSS & LESS vor allem dazu dienen, Webentwicklern im Front-End ein schnelleres & effizienteres Styling von Webseiten – vor allem große Webprojekten, wie z. B. mehrseitigen Webshops – zu ermöglichen.

Ich habe schnell gelernt, einige der großen Features von SASS – Variablen, "Nesting”, und der direkte Import von externen Stylesheets – in meinem Projekt zu meinem zeitlichen Vorteil einzusetzen und bei der Umsetzung dieser Webseite den Umgang mit unterschiedlichen Compilern im Workflow gelernt.

Startsektion und SASS-Sektion auf zwei iMac-Mockups
Startsektion und SASS-Sektion auf zwei iMac-Mockups

Anmerkungen

Diese Webseite wurde noch nicht vollständig zur Darstellung auf kleinen Mobilgeräten optimiert.

Dir gefällt meine Arbeit?

Schreibe mir eine E-Mail, wenn Du mit mir gemeinsam Ideen und Projekte verwirklichen möchtest.

E-Mail verfassen