Spring GDS 25. Jubiläum
Ein Logistikunternehmen, das in 190 Länder versendet, hat etwas gebaut, um an sich selbst zu liefern.
Sass ist ein Präprozessor für CSS. Sie schreiben Stylesheets in einer mächtigeren Sprache, und ein Build-Schritt übersetzt sie in reines CSS, das der Browser versteht. SCSS ist die gängigste Syntax dafür und ein Superset von CSS, was bedeutet: Jede gültige CSS-Datei ist bereits gültiges SCSS. Sie übernehmen es, ohne das Bestehende neu zu schreiben.
Was Sass ergänzt, ist die Struktur, die reinem CSS historisch fehlte: Variablen für gemeinsame Werte, Verschachtelung, die abbildet, wie Elemente zueinanderstehen, Mixins, die wiederverwendbare Style-Blöcke bündeln, und Funktionen zum Rechnen. Ein Team, das die Abstandsskala und die Farbpalette einer Marke als Variablen definiert, kann sie überall wiederverwenden und mit einer einzigen Änderung die ganze Seite aktualisieren. Natives CSS hat inzwischen Custom Properties und Verschachtelung erhalten und den Abstand verringert, doch Sass leistet zur Build-Zeit weiterhin mehr und bleibt das Rückgrat zahlloser Produktiv-Codebasen. Es ist weniger ein Konkurrent von CSS als eine Schicht, die große Stylesheets handhabbar macht.
Der Haken ist der Build-Schritt. Sass muss kompiliert werden, was Werkzeuge hinzufügt, und ein Übermaß an Funktionen wie tiefer Verschachtelung kann still aufgeblähtes CSS erzeugen. Mit Disziplin eingesetzt, hält es ein großes Designsystem kohärent.
Wenn das Styling eines Projekts groß genug ist, um echte Struktur zu brauchen, geben wir sie ihm oft mit Sass. Variablen, Mixins und eine sinnvolle Dateiorganisation machen aus einem wuchernden Stylesheet etwas, durch das ein Team navigieren kann, wo das Ändern der Akzentfarbe der Marke eine einzige Bearbeitung ist statt eines Suchen-und-Ersetzens quer durch die Codebasis.
Wir stützen uns vor allem in der Design-System-Entwicklung darauf, wo Konsistenz über viele Komponenten und Seiten der ganze Sinn ist. Einmal definierte und überall wiederverwendete Tokens halten das Produkt visuell kohärent, während es wächst, und halten das Styling für das Team des Kunden wartbar, nachdem wir es übergeben haben. Wir nutzen die Funktionen, die ihren Platz verdienen, und lassen jene weg, die nur Cleverness hinzufügen, denn ein Stylesheet soll leicht lesbar sein, kein Rätsel.
Wuchern die Styles über das hinaus, was reines CSS zusammenhalten kann? Geben wir ihnen Struktur.
Ein Logistikunternehmen, das in 190 Länder versendet, hat etwas gebaut, um an sich selbst zu liefern.
Eine Marke in ein funktionierendes Geschäft verwandeln.
Eine halbe Million Menschen. Eine App. Null Chaos.















