Warum SASS am Ende ist

Goodbye SASS, und welcome natives CSS

Sass hat sich als leistungsstarker Präprozessor etabliert, der lokal installiert jahrelang das Rückgrat einiger meiner Projekte bildete. Es ermöglichte mir, skalierbare und stabile CSS-Pakete effizient zu organisieren und teilweise eine eigene Logik abzubilden. Auch heute noch halte ich Sass für ein außerordentlich leistungsfähiges Werkzeug. Doch im Jahr 2024 ist es unbestreitbar, dass sich CSS rasant entwickelt hat. Funktionen, die einst einzigartig für Sass waren, sind nun nativ in CSS integriert, darunter Variablen und das neueste Highlight: CSS-Nesting. Variablen

Die Definition von Variablen wurde lange als eine besondere Stärke von SCSS angesehen, da sie die zentrale Verwaltung vieler Eigenschaften ermöglichte, eine Funktion, die in CSS lange Zeit schmerzlich vermisst wurde. Heute jedoch können Variablen auch in CSS auf ähnliche Weise wie in Sass definiert werden. Ein wesentlicher Unterschied besteht jedoch darin, dass Sass-Variablen ausschließlich im Kontext des Präprozessors existieren, während CSS-Variablen im Browser verwendet und sogar dynamisch über JavaScript überschrieben werden können.

:root {
  --link-padding: 5px 10px;
  --link-bg-color: #ff6347;
  --link-text-color: #ffffff;
  --link-border-radius: 4px;
}

.link {
  display: inline-block;
  padding: var(--link-padding);
  background-color: var(--link-bg-color);
  color: var(--link-text-color);
  border-radius: var(--link-border-radius);
  text-decoration: none;
  transition: background-color 0.3s;
}

CSS-Nesting

Die Möglichkeit, die Stilregeln eines Elements innerhalb eines anderen zu definieren, vereinfachte das Schreiben von CSS in Sass erheblich. Anstatt wiederholt denselben Selektor für untergeordnete Elemente oder Pseudo-Selektoren zu verwenden, ermöglicht das Nesting das Gruppieren dieser innerhalb eines übergeordneten Selektors. Diese Technik führt zu einer klaren, hierarchisch strukturierten und somit effizienteren Codebasis.

Mit einer Browserunterstützung von über 84% für CSS-Nesting und 86% für den Nesting-Selektor wird diese Technik zunehmend zugänglich. Es wird sicher noch seine Zeit dauern, aber ich sehe das Feature nativ nutzbar innerhalb der nächsten 2 Jahre.

.card {
  position: relative;
  padding: 1.5rem;
  background: var(--neutral-300);

  .card-item {
    border: 1px solid var(--neutral-400);

    & p {
      font-size: 1.2rem;
    }
  }
}

Die :is Pseudo-Klasse

Die :is Pseudo-Klasse revolutioniert das Selektorenkonzept, indem sie eine Liste von Selektoren akzeptiert und alle Elemente stylt, die mit einem dieser Selektoren übereinstimmen. Dies erleichtert die Auswahl und das Styling von Elementen im DOM erheblich.

:is(selector1, selector2, selector3) {
  /* styles */
}

Anstelle langer Selektorlisten kannst Du :is() verwenden, um die Lesbarkeit zu verbessern und lange Selektoren zu vermeiden.

Die :has Pseudo-Klasse

Die CSS-Pseudo-Klasse :has() bietet eine leistungsstarke Möglichkeit, ein Element basierend auf seinen Nachkommen auszuwählen, ähnlich der Anwendung von bedingten Stilen.

.hero:has(.hero-button) {
  background-color: var(--accent-50);
}

Container-Queries

Container Queries werden als die bedeutendste Innovation im Webdesign seit CSS3 angesehen. Sie erweitern das Konzept des Responsive Designs, indem sie es ermöglichen, dass sich Elemente basierend auf der Größe ihrer Container anpassen. Diese Technologie ermöglicht es, das Design eines Elements dynamisch je nach Kontext zu ändern, was zu einem flexibleren und anpassungsfähigeren Design führt.

.component {
  --theme: light;
  container-name: elegant;
}

@container elegant style(--theme: light) {
  .elegant {
    /* light styles. */
  }
}

.parent-container {
  container-type: block-size;

  .subtitle {
    font-size: 1.5rem;
  }

  @container (height >= 500px) {
    .subtitle {
      font-size: 2rem;
    }
  }
}

Wenn der Container elegant die Variable —theme: dark hat, füge das folgende CSS hinzu.

Kaskadenschichten

Mit Kaskadenschichten können wir das Verschachteln von Klassen, IDs usw. zur Erhöhung der Spezifität vermeiden, indem wir unsere eigene Schicht (layer) zuweisen. Durch die Verwendung der @layer-Regel und geschichteter @imports können wir unsere eigenen Schichten der Kaskade aufbauen - von Stilen mit niedriger Priorität wie Resets und Standards, über Themen, Frameworks und Designs, bis hin zu Stilen mit höchster Priorität wie Komponenten, Dienstprogrammen und Overrides. Kaskadenschichten bieten mehr Kontrolle.

@layer utilities {
  .button {
    padding: 0.5rem;
  }

  .button--lg {
    padding: 0.8rem;
  }
}

Zukunft von SASS

Bedeutet das, dass Sass überflüssig geworden ist? Keineswegs. Mixins und Funktionen, wie die Umrechnung von Pixeln in Rem, bleiben unverzichtbare Vorteile von Sass. Dennoch habe ich beschlossen, Sass für die meisten meiner Projekte zu meiden. Stattdessen verwende ich vordefinierte Codeblöcke und Pakete in meinem Sublime Editor, was meinen Workflow erheblich verbessert hat.

Auf Wiedersehen SASS?

Ich bin fest davon überzeugt, dass im Jahr 2024 die Vorteile von Sass, einschließlich Installations-, Verwendungs- und Kompilierungsproblemen, seine Nutzung nicht mehr rechtfertigen. Die Skalierbarkeit und Benutzerfreundlichkeit von modernem CSS ermöglichen es, auf zusätzliche Tools zu verzichten. Mit den Fortschritten in CSS freue ich mich darauf, kleine und große Projekte direkt und unkompliziert umzusetzen.

Auf Wiedersehen Sass, und danke! ❤️

About

Ich bin Tobias, der Gründer von Tobeworks und arbeite seit zwei Dekaden als Fullstack Webdeveloper.