Wechsel von SCSS zu sauberem CSS — schnell und schmerzlos

CSS entwickelt sich rasant weiter und holt die Präprozessoren ein. Jetzt hat die Sprache selbst bereits Variablen, Verschachtelungen, Farbfunktionen und Kaskadenschichten - das, wofür Sass früher verwendet wurde. Wenn Sie also noch SCSS in Ihrem Projekt haben, ist es möglicherweise an der Zeit, auf reines CSS umzusteigen. Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung, wie Sie dies ohne Schmerzen und mit Vergnügen tun können 💅

✅ Checkliste vor dem Übergang

• 🔍 Führen Sie ein Audit der Sass-Funktionalität durch (Variablen, Mixins, Verschachtelung, @extend, Schleifen)

• 🌐 Browserunterstützung prüfen (bis 2025: >90 % unterstützen alle wichtigen Funktionen)

• 🎯 Beginnen Sie mit Variablen: Ersetzen Sie $color durch --color und verwenden Sie var(--color)

• 🔁 Mixins und Funktionen in CSS-Klassen und -Funktionen (calc(), clamp() usw.) umschreiben

• ✂️ @extend und Schleifen löschen — durch Vorlagen und benutzerdefinierte Eigenschaften ersetzen

• 📁 Importe neu erstellen — @import nativ oder über den Assembler verwenden

• 🧪 Führen Sie Tests durch: Alles sollte wie zuvor aussehen

🎨 Beispiel 1: Variablen

War (SCSS):

$primary-color: #3498db;
.button {
  background-color: $primary-color;
}

Jetzt (CSS):

:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

🎨 Sie können auch hsl(from var(--color) ...) verwenden, um darken()/lighten() zu ersetzen.

📦 Beispiel 2: Verschachtelung

SCSS:

.card {
  .header {
    h2 {
      margin: 0;
    }
  }
}

CSS (Verschachtelung wird nativ unterstützt!):

.card {
  & .header {
    & h2 {
      margin: 0;
    }
  }
}

🌈 Beispiel 3: Farbfunktionen

SCSS: lighten($color, 10%)

CSS:

.primary-light {
  color: hsl(from var(--base-color-hsl) h s calc(l + 10%));
}

Oder über color-mix:

.primary-dark-alt {
  color: color-mix(in srgb, var(--base-color) 85%, black);
}

🧠 Beispiel 4: Funktionen und Berechnungen

SCSS:

@function calculate-width($cols, $total: 12) {
  @return percentage($cols / $total);
}

CSS:

:root {
  --grid-columns: 12;
}
.column-4 {
  width: calc(4 / var(--grid-columns) * 100%);
}

🧩 Beispiel 5: Mixins

SCSS:

@mixin button-style($color) {...}

CSS:

.button {
  color: white;
  background-color: var(--btn-color);
}
.primary-button {
  --btn-color: blue;
}

📱 Beispiel 6: Medien- und Containerabfragen

SCSS: eingebettet @media

CSS: Containeranfragen:

.sidebar {
  container-type: inline-size;
}
@container (max-width: 768px) {
  .sidebar-item {
    padding: 0.5rem;
  }
}

🧰 Wo geht es weiter?

Möchten Sie CSS vertiefen und lernen, wie man vollwertige Webanwendungen erstellt? 📱✨

In der Kodik-App können Sie Kurse in HTML, CSS und JavaScript belegen, Layout- und Frontend-Entwicklung erlernen, adaptive Websites und Animationen erstellen. Der Kurs ist sowohl für Anfänger als auch für diejenigen geeignet, die ihr Wissen systematisieren möchten.

• 🧩 Praktische Übungen

• 🧪 Tests und Projekte

• 📜 Zertifikate und Diplome

• 🤖 Hilfe vom KI-Assistenten

Lerne CSS und werde Frontend-Entwickler mit Kodik!

🎯 Fazit

Sass hat seine Aufgabe erfüllt, aber CSS ist nicht mehr dasselbe. Jetzt können Sie leistungsstarke, skalierbare Stile ohne Präprozessoren schreiben. Beginnen Sie mit einer Komponente und Sie werden überrascht sein, wie viel einfacher alles geworden ist.