Zum Inhalt springen
Numio

SCSS in CSS umwandeln — Numio

Kompiliert SCSS (.scss, Syntax mit geschweiften Klammern) mit Dart Sass zu reinem CSS und ergänzt anschließend Vendor-Präfixe mit Autoprefixer. Variablen, @mixin/@include, Verschachtelung und eingebaute Module wie sass:math werden in flache CSS-Regeln aufgelöst.

Kompiliertes CSS aus einem .scss-Snippet (etwa einer Komponente im Bootstrap-Stil) gewinnen, um es in ein Projekt ohne Sass-Build-Schritt einzufügen.

Scss

CSS

Wann sie hilft

  • Kompiliertes CSS aus einem .scss-Snippet (etwa einer Komponente im Bootstrap-Stil) gewinnen, um es in ein Projekt ohne Sass-Build-Schritt einzufügen.
  • Vor dem Committen von SCSS-Änderungen nachvollziehen, wie Verschachtelung, &-Selektoren und Farbfunktionen wie darken() aufgelöst werden.

Anwendung

  1. Füge SCSS in den Scss-Editor ein oder ziehe eine .scss-Datei darauf.
  2. Öffne Settings, um Autoprefixer-Ziele zu wählen: defaults, not ie < 11, last 2 versions, iOS 7, last 3 iOS versions. Anfangs ist nur "defaults" aktiv.
  3. Kopiere das Ergebnis aus dem CSS-Bereich; es ist reines CSS, das du direkt als .css-Datei speichern kannst.

SCSS-Eingabe

$primary: #3b82f6;

@mixin flex-center {
  display: flex;
  align-items: center;
}

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #0b63f3;
}

Details und Einschränkungen

Die Kompilierung findet auf dem Server statt: Die Seite sendet deinen Code an /api/sass-to-css, das Dart Sass compileString mit der scss-Syntax aufruft. Autoprefixer und die Prettier-Formatierung laufen danach in einem Web Worker in deinem Browser.

Jede Eingabe wird als einzelne, eigenständige Datei kompiliert. @use oder @import eigener Partials schlägt mit "Can't find stylesheet to import" fehl; eingebaute Module wie @use "sass:math" funktionieren.

Erzeugt die Eingabe kein CSS (nur Variablen, Mixins oder Funktionen), ist das Ergebnis ein einzelner CSS-Kommentar, dass kein CSS erzeugt wurde, statt eines Fehlers.

FAQ

Werden @use "sass:math" und andere eingebaute Module unterstützt?

Ja. Eingebaute Module wie sass:math, sass:color und sass:map sind verfügbar, weil der Code von Dart Sass kompiliert wird. Nur Imports eigener Dateien schlagen fehl, da ausschließlich der eingefügte Text gesendet wird.

Wird mein SCSS an einen Server gesendet?

Ja. Die Seite sendet den Code zur Kompilierung an ihren Endpunkt /api/sass-to-css. Präfixe und Formatierung werden danach in deinem Browser ergänzt. Füge keinen Code ein, den du nicht weitergeben darfst.

Kann ich es für die eingerückte .sass-Syntax verwenden?

Nein, diese Seite kompiliert mit der SCSS-Syntax, daher lässt sich einrückungsbasierter Code nicht parsen. Nutze die Seite Sass to CSS, die das Flag für die eingerückte Syntax an dieselbe API sendet.

Wie erhalte ich Vendor-Präfixe für ältere Browser?

Öffne Settings und aktiviere Ziele wie "last 2 versions" oder "not ie < 11". Die gewählten Queries werden als Browserliste an Autoprefixer übergeben.

Spezifikationen und Referenzen