Die ersten Web-Stylesheets gab es bereits 1993 - Eine Revolution, um die unästhetischen HTML-Files auf ein neues Level zu heben. Heute ist CSS in der dritten Version und trotz der ganzen Zeit, gibt es viele hilfreiche Funktionen, die viele überhaupt nicht kennen, beispielsweise Nesting. Was das konkret bedeutet und weshalb man das nutzen sollte, erfahrt ihr hier.

SASS

SASS unterstützte Nesting lange bevor es in CSS verfügbar war. Zusätzlich bringt es Features wie Variablen, Schleifen und dynamische Imports mit, die komplexe Stylesheets effizienter und übersichtlicher machen.

SASS.gif

Der Grundgedanke: Du schreibst modularer, wiederholst dich weniger und bekommst mehr Struktur in große Stylesheets.

Warum SASS früher unverzichtbar war

Vor ein paar Jahren war CSS ziemlich minimalistisch. Keine echten Variablen, kein Nesting, keine logischen Operatoren. Wenn du damals sauber und skalierbar arbeiten wolltest, war SASS dein Werkzeug. Es war quasi die Rettung für alle, die nicht jedes Mal ihre Selektoren von Hand duplizieren wollten.

Warum die Nachteile existieren

  • Kompilierung: SASS ist nicht das, was der Browser versteht. Du musst es immer erst in normales CSS übersetzen. Das heißt: zusätzliche Tools, Build-Schritte, mögliche Fehlerquellen.

  • Fehlersuche: Wenn ein Selektor in 8-facher Verschachtelung lebt, ist es kein Spaß, herauszufinden, welcher Teil davon sich gerade verkalkuliert hat. Außerdem zeigt dir der Browser-Inspector nur das ausgegebene CSS, nicht dein schönes SASS mit all seinen Strukturen.

  • Lernaufwand: SASS ist wie CSS mit superkrassem Zubehör. Man muss die Sprache einmal wirklich durchdringen, bevor sie einem Arbeit abnimmt.

Die Rolle von SASS ist kleiner geworden durch natives CSS

  • Native CSS-Variablen: --color-primary: #333;

  • Nesting: inzwischen Teil des Standards

  • @layer, @scope, Container Queries

  • Farb- und Logikfunktionen wie color-mix, calc, min/max/clamp

Wie nutzt man nun modernes CSS?

Ich zeige es dir an einem Beispiel: Wenn unser HTML so aussieht:

<div class="tabs">
  <nav class="tablist">
    <button class="tab active">Info</button>
    <button class="tab">Adresse</button>
  </nav>

  <section class="panel active" data-name="info">
    <form class="profile-form">
      <label>
        Benutzername
        <input type="text" />
      </label>

      <label>
        Über dich
        <textarea></textarea>
      </label>

      <button>Speichern</button>
    </form>
  </section>
</div>

Dann kann unser CSS so aussehen:

.tabs {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;

  .tablist {
    display: flex;
    border-bottom: 1px solid #ccc;

    .tab {
      background: none;
      border: none;
      padding: 1rem;
      cursor: pointer;
      opacity: 0.6;

      &.active {
        opacity: 1;
        border-bottom: 2px solid #333;
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }
  • .XYZ{ .ABC {} .DEF {} } - Das ist die Art der Verschachtelung.
  • ".tabs" ist unser Hauptselektor (Ein Selektor ist der Ausdruck in CSS, der bestimmte Elemente im HTML-Dokument auswählt, damit du ihnen Styles geben kannst).
  • "&" um das Pseudo-Element an den Selektor dranzukleben, ohne das Element müsste der Browser hellsehen können.

Fazit

Damit wir uns nicht in Wiederholungen verzetteln, setzen wir auf verschachtelten CSS-Code. Das hält die Struktur klar, reduziert Ballast und macht große Stylesheets wesentlich angenehmer zu pflegen. Das vollständige Beispiel findest du auch auf Codepen, falls du selbst ein bisschen testen möchtest.