Dallonses Logo

Sass (SCSS)

Was ist Sass (SCSS)?

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.

Sass (SCSS) bei Dallonses

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.

Sprechen Sie mit uns über Ihre Styles

Verwandte Dienstleistungen


Bereit zum Zusammenarbeiten?

Termin buchen
Aymón hält ein Tools-Magazin vor seinem Gesicht
Ari arbeitet auf einem Laptop im Freien, umgeben von Pflanzen
Draufsicht auf einen Holzschreibtisch mit Tastatur, Maus und Kopfhörern
Handgezeichnete Illustration einer Hand, die mit den Fingern schnippt
Nico lehnt an einem Wasserspender neben einem Feuerlöscher
Nahaufnahme eines offenen Computers mit Leiterplatte und Komponenten auf einem Holzschreibtisch
Bernat und Andreu arbeiten zusammen an einem Schreibtisch mit Monitoren und einem Laptop
Handgezeichnete Illustration einer offenen Hand, die winkt
Aymón hält ein Tools-Magazin vor seinem Gesicht
Ari arbeitet auf einem Laptop im Freien, umgeben von Pflanzen
Draufsicht auf einen Holzschreibtisch mit Tastatur, Maus und Kopfhörern
Handgezeichnete Illustration einer Hand, die mit den Fingern schnippt
Nico lehnt an einem Wasserspender neben einem Feuerlöscher
Nahaufnahme eines offenen Computers mit Leiterplatte und Komponenten auf einem Holzschreibtisch
Bernat und Andreu arbeiten zusammen an einem Schreibtisch mit Monitoren und einem Laptop
Handgezeichnete Illustration einer offenen Hand, die winkt