print logo

Webentwicklung mit SASS - Webdesign in der Praxis

CSS-Präprozessoren erleichtern die Arbeit von Webentwicklern mit CSS.
formativ.net oHG | 25.09.2014
Cascading Styles Sheets, kurz: CSS, ist eine weitverbreitete textbasierende Auszeichnungssprache, die in der Internetprogrammierung unter anderem eingesetzt wird, um das definierte Aussehen von Internetseiten (Webdesign) zu erzeugen. Als Erweiterung zu CSS besteht für Webdesigner und Internetprogrammierer seit einigen Jahren die Möglichkeit, sogenannte CSS-Präprozessoren einzusetzen. Diese ergänzen CSS um sinnvolle Funktionen. In der Webentwicklung kann durch den Einsatz von CSS-Präprozessoren wie SASS, LESS oder Stylus deutlich Zeit eingespart und ein schlankerer Quellcode erzeugt werden. Gerade für umfangreichere Internetprojekte bieten die CSS-Präprozessoren Vorteile, wie ein Fachartikel der formativ.net Internetagentur am Beispiel von SAAS erklärt.

CSS wurde entworfen, um bei der Programmierung von Internetseiten die Darstellungsvorgaben von den Inhalten zu trennen. Übersetzen ließe sich Cascading Style Sheets in etwa als "hintereinander geschaltete Gestaltungsvorlagen", was bereits Rückschluss auf die Funktionsweise und den Aufbau von CSS-Strukturen gibt. Am häufigsten wird CSS in Kombination mit HTML oder XHTML-Dokumenten eingesetzt und bestimmt hierdurch das Aussehen der wohl meisten Internetseiten, z.B. als Bestandteil von Templates oder Themes für Content Management Systeme wie Wordpress, Joomla, Typo3, Drupal und andere.

Ein Nachteil von CSS ist, dass Eigenschaften für jeden einzelnen Selektor angegeben werden müssen. Damit widerspricht CSS einem wesentlichen Grundprinzip moderner Programmierung. Bei immer komplexer werden Internetprojekten, die gleichzeitig in Bezug auf die optische Darstellung für eine größere Anzahl von Endgeräten optimiert werden müssen (unterschiedliche Auflösungen und Browser von Destop-Geräten, Tablets, Smartphone, Internet-TV etc.), führt dies zu einem erheblichen Mehraufwand in der Webentwicklung. Durch CSS-Präprozessoren lassen sich nun Variablen und Funktionen nutzen, um zentrale Werte, z.B. bezüglich Farbgebung, Abständen etc. für den Webentwickler zentral zu hinterlegen. Erst durch das anschließende Kompilieren werden die Werte dann automatisch für alle zugewiesenen Selektoren übernommen.

Mehr Informationen zur Webentwicklung mit SASS:

blog.formativ.net/webentwicklung-mit-sass/