Zum Inhalt springen
Numio

Sass in CSS umwandeln — Numio

Kompiliert Sass in eingerückter Syntax (.sass, ohne geschweifte Klammern und Semikolons) mit Dart Sass zu reinem CSS und führt anschließend Autoprefixer für die gewählten Zielbrowser aus. Variablen, Mixins (=name / +name) und Verschachtelung werden in flache CSS-Regeln aufgelöst.

Prüfen, was eine .sass-Datei in eingerückter Syntax aus einem älteren Rails- oder Bulma-artigen Projekt ergibt, ohne eine Sass-Toolchain einzurichten.

Sass

CSS

Wann sie hilft

  • Prüfen, was eine .sass-Datei in eingerückter Syntax aus einem älteren Rails- oder Bulma-artigen Projekt ergibt, ohne eine Sass-Toolchain einzurichten.
  • Reines CSS aus einem .sass-Snippet erzeugen, um es in ein CMS, eine E-Mail-Vorlage oder einen Codepen einzufügen, der kein Sass akzeptiert.

Anwendung

  1. Füge Sass in den Sass-Editor ein oder ziehe eine .sass-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.

Sass-Eingabe

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

CSS

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #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 eingerückten 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.

Vendor-Präfixe hängen von den gewählten Zielen ab. Im Beispiel erhält user-select mit der Query "defaults" die Präfixe -webkit- und -moz-.

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

Was ist hier der Unterschied zwischen Sass und SCSS?

Diese Seite erwartet die eingerückte Syntax: Verschachtelung per Einrückung, keine geschweiften Klammern oder Semikolons, Kurzformen =mixin und +include. Für Code mit geschweiften Klammern nutze die Seite SCSS to CSS; beide rufen dieselbe API mit einem anderen Syntax-Flag auf.

Kann ich Partials wie _variables.sass importieren?

Nein. Der Server kompiliert nur den eingefügten Text, ohne Dateisystem oder Ladepfade, daher schlagen Imports eigener Dateien fehl. Füge stattdessen den Inhalt des Partials oberhalb des Codes ein, der ihn verwendet.

Was passiert, wenn meine Datei nur Variablen oder Mixins enthält?

Sass erzeugt kein CSS für Deklarationen, die nie verwendet werden, daher zeigt die Seite den Kommentar /* No CSS generated: ... */. Füge eine Regel hinzu, die die Variablen verwendet oder das Mixin einbindet, um eine Ausgabe zu erhalten.

Ist die Ausgabe minifiziert?

Nein. Das CSS ist ausgeschrieben und mit Prettier formatiert. Verschachtelte Selektoren wie &:hover werden als eigene Regeln wie .button:hover ausgegeben.

Spezifikationen und Referenzen