denkwerk TechTalk
SASS (Syntactically Awesome Stylesheets)
Der TechTalk bei denkwerk ermöglicht unseren Teams, neue Technologien zu kommunizieren und vorhandenes Wissen auszutauschen. Vor allem in Sachen Web-Technologie ist viel in Bewegung, der TechTalk ist dabei die ideale Plattform, um auch fachfremde Mitarbeiter:innen auf den aktuellen Stand zu bringen. Dabei ermöglichen wir allen den kreativen Umgang mit aktuellen Technologietrends. Bei der internen Weiterbildung haben wir immer das Ziel im Auge: unseren Kunden auf jeder Ebene die optimale Beratung zu bieten.
Die neuen Regeln der CSS-Erweiterungssprache SASS
Im letzten TechTalk präsentierte unsere Entwicklerin Špela Slivšek moderne Tools in der CSS-Entwicklung, genauer gesagt in der CSS-Erweiterungssprache SASS („Syntactically Awesome Stylesheets“). Die klassische @import-Regel für die Integration verschiedener Stylesheets in CSS-Projekte ist veraltet, langsam und kann bei der Kompilierung komplexer Projekte Fehlermeldungen verursachen. Daher empfiehlt sie, die neueren Regeln @use und @forward zu verwenden. Im TechTalk erklärte sie die Vorteile dieser neuen Regeln und wie sich Projekte umstellen lassen:
„Es gibt ein Migrationstool, das hilft, alte Projekte auf die neueste Version von SASS zu bringen und dabei @use und @forward zu verwenden.“
@import wird abgelöst
Špela weiß: Der größte Nachteil der alten @import-Regel ist, dass sie nicht zielgerichtet eingesetzt werden kann. Dies kann Schwierigkeiten verursachen, weil nicht nur die Reihenfolge der Calls relevant ist, sondern Styles auch einfach überschrieben werden: Tritt ein Fehler auf, ist es für Entwickler größerer Projekte dadurch oft schwierig, die Ursache herauszufinden.
Für mehr Effizienz in der Entwicklung: @use und @forward
Nicht so mit den SASS-Regeln @forward und @use: Beide isolieren die Quelle des Codes deutlich besser, erlauben zielgerichtetere Importe, da sie jede Quelldatei als isoliertes Modul betrachten – und sorgen dadurch letztlich für mehr Effizienz und Übersichtlichkeit im Code sowie eine Erleichterung beim Debugging.
Viele SASS-Entwickler greifen inzwischen vor allem zu @use als „Schweizer Taschenmesser“. Dies ist laut Špela aber nicht immer sinnvoll:
„@use kann sowohl genutzt werden, um Variablen, Mixins und Funktionen als auch Styling-Regeln zu importieren, allerdings kann das Performance-Probleme bei der Kompilierung verursachen.“
Gerade bei größeren Projekten kann also die Verwendung von @forward einen positiven Einfluss auf die Build-Performance haben. Um den Übergang möglichst einfach zu machen, kann @forward das alte @import weitestgehend ersetzen.
Vorsicht allerdings bei der Verwendung des Migrationstools: „Das Migrationstool kann knifflig sein“, warnt Špela. „Ich hatte bei einem Projekt in jeder Zeile Fehler“. Die Ursache liegt in mangelhafter Erkennung individueller Programmierstile, wodurch letztlich Leerzeichen Fehler verursachten. Eine manuelle Anpassung ist also nicht immer zu vermeiden.
Am Ende des Tages sorgt der Einsatz der modernen Regeln @forward und @use aber für einen deutlich effizienteren Einsatz des SASS-Codes und kann CSS-Programmierern das Leben deutlich erleichtern – und davon profitieren unsere Projekte.
