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.

Grundlagen der Webprogrammierung: Basiswissen

CSS-Präprozessoren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Cascading Style Sheets (CSS) sind nützlich und einfach anzuwenden. Aber wie so oft könnte alles noch ein bisschen einfacher sein. Und genau hier kommen die CSS-Präprozessoren ins Spiel.

Transkript

CSS ist zwar eine recht einfache und leistungsfähige Sprache, aber je komplexer der Code wird, desto unübersichtlicher wird er auch. Es fehlen wichtige Funktionen, um CSS-Code zu strukturieren, und um sich die Arbeit zu erleichtern. Oft kommt es vor, dass man immer wieder sehr ähnliche, wenn nicht gar sogar identische Code-Segmente schreiben muss. Es ist nicht nur lästig, das kostet nicht nur Zeit, das erhöht vor allem die Gefahr von sehr schwer zu findenen Tippfehlern, die Ihren kompletten CSS-Code aus der Kurve tragen können. Hier helfen CSS-Präprozessoren dem System deutlich auf die Sprünge. Der etwas ungelenke und arg technisch klingende Begriff Präprozessor ist rasch erklärt. Ein Präprozessor ist ein Programm, das vor der eigentlichen Verarbeitung von Daten zum Einsatz kommt. Er bietet eine erweiterte Funktionalität, optimiert die Daten und bereitet sie auf die eigentliche Verarbeitung vor. Bei CSS-Präprozessoren handelt es sich um mehr oder weniger komplexe und leistungsfähige Script-Sprachen, die CSS um Funktionen und Möglichkeiten erweitern. Als Ergebnis erzeugt ein CSS-Präprozessor schließlich einen eigentlichen nativen CSS-Code. Der Einsatz eines CSS-Präprozessor ist ein zweistufiger Prozess. Nehmen wir als Beispiel den CSS-Präprozessor Sass. Der stellt eine eigene Script-Sprache bereit, deren Dateien die Endung SCSS haben. Wir schreiben Ihren Code in Sass und übergeben ihn dem Sass-Interpreter. Der eine dosiert Ihren Code und erzeugt das gewünschte CSS. Dieser CSS-Code wird als Datei auf dem Server abgelegt, und kann dann in Ihrem HTML-Dokument als externes stylesheet eingebunden werden. CSS-Präprozessoren bieten eine Reihe von Vorteilen. Sie erweitern zum einen die Funktionalität von CSS. Mit einem Präprozessor können Sie etwa in CSS-Code Variablen, Bedingungen, Schleifen und ähnliches benutzen. Strukturen, also, die Ihnen CSS von Haus aus nicht zu bieten hat. Die Syntax eines CSS-Präprozessors ist oft einfacher und besser, als die Syntax von Standard CSS. Und nicht zuletzt, der Präprozessor berücksichtigt auch die Unterschiede zwischen verschiedenen Browsern. Mit einem CSS-Präprozessor ist es also einfacher CSS-Code zu schreiben, der in allen Browsern funktioniert. Es gibt eine ganze Reihe von Präprozessoren. Schauen wir uns mal die drei wichtigsten an. Da ist zum einen das grad schon erwähnte Sass. Sass ist in Ruby geschrieben und bietet zwei verschiedene Syntaxvarianten, zwischen denen Sie wählen können. less ist in JavaScript geschrieben und in seiner Syntax an CSS angelehnt. Wenn Sie mit CSS vertraut sind, wird Ihnen der Einsatz von less am wenigsten Probleme bereiten. Und schließlich gibt es noch stylus. Auch dieser Präprozessor ist in JavaScript geschrieben und bietet ähnliche Funktionalität wie Sass oder less. Stylus arbeitet mit einer sehr reduzierten Syntax. Normalerweise müssen Sie etwa einen Code-Block in Mengen Klammern einfassen, oder das Ende einer Anweisung mit einem Semikolon markieren. In stylus sind diese Zeichen optional und können auch weggelassen werden. Sie sehen, es sprechen also einige Punkte für den Einsatz von CSS-Präprozessoren. Es sprechen aber auch einige dagegen. Zu den Nachteilen von CSS-Präprozessoren gehören etwa, dass Sie die Arbeit in einem Team erschweren. Während Sie CSS-Kentnisse als Grundlagen voraus setzen können, ist es bei Präprozessoren durchaus nicht der Fall. Obendrein kann der Einsatz eines Präprozessors deutlich nach hinten losgehen. Sie sparen zwar bei der Entwicklung viel Zeit und müssen weniger Code schreiben, aber es kann passieren, dass das von Präprozessor erzeugte CSS aufgeblähter und ineffizienter gerät, als Sie sich es eigentlich gedacht haben. Und zu guter Letzt fügt ein Präprozessor Ihrem Workframe eine weitere Ebene an Komplexität hinzu. Sie müssen Ihren Code zuerst im Präprozessor schreiben und anschließend überprüfen, welche Qualität der erzeugte CSS-Code eigentlich hat. Bei der Frage, ob der Einsatz eines CSS-Präprozessor sinnvoll ist oder nicht, steht also vor einem kleinen Dilemma. Und außer einem, experimentieren Sie und probieren Sie es einfach aus, kann ich Ihnen da auch nicht mit auf den Weg geben. Nun, es gibt doch einen kleinen Hoffnungsschimmer, denn die Entwicklung von CSS bleibt natürlich nicht stehen, und mit jeder neuen Version von CSS, werden Funktionen integriert, die bislang nur in Präprozessoren raben. Wer weiss, vielleicht werden wir also, in gar nicht so ferner Zukunft, auf CSS-Präprozessoren völlig verzichten können.

Grundlagen der Webprogrammierung: Basiswissen

Lernen Sie die wichgsten Technologien und Begriffe des World Wide Web kennen und sehen Sie, wie Sie sie selbst anwenden können.

2 Std. 21 min (29 Videos)
Super Einführung!
Universitäts- und Stadtbibliothek Köln
Das Videotraining bietet einen wirklich hervorragenden Überblick rund um das Thema Internet und Webentwicklung. Insbesondere wenn man an den Anfängen der Webentwicklung steht und die ersten Schritte hinter sich gebracht hat (bsp. Erste einfache Websites erstellt, Grundkenntnisse in einigen Sprachen) ist dieses Training eine tolle Einführung in alles, was im Web wichtig ist!
 

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!