SCSS und LESS online zu CSS kompilieren — ohne Build-Tool

SCSS- oder LESS-Snippets (Variablen, Nesting, Mixins) im Browser zu CSS kompilieren — ohne npm run build, ideal für Reviews und Umgebungen ohne Node.

16.09.2026

10 Min. Lektüre

Teilen Sie diesen Artikel:

SCSSLESSCSS-PräprozessorCSSAnleitung

SCSS oder LESS außerhalb des Projekts kompilieren

Ein Kommentar in einem Pull Request mit zwölf Zeilen SCSS, ein Stack-Overflow-Snippet mit parametrischem Mixin oder ein Onboarding auf einem Laptop ohne Node: nichts davon rechtfertigt npm run build. FastMinify ersetzt weder Dart Sass in der CI noch sass-loader oder die CSS-Pipeline von Vite. Der SCSS-zu-CSS-Compiler führt Dart Sass im Tab aus, der LESS-zu-CSS-Compiler führt less.js auf dieselbe Weise aus. Fügen Sie ein Snippet ein oder legen Sie einen lokalen Ordner mit Partials ab und lesen Sie Standard-CSS. Es wird nichts hochgeladen. Die Werkzeuge liegen im CSS-Präprozessoren-Hub. Nach der Kompilierung eignet sich der Online-CSS-Minifier, wenn Sie kleineres CSS brauchen, denn die Ausgabe im Stil expanded ist nur lesbar.

Dart Sass für SCSS und less.js für LESS laufen vollständig im Browser, ohne Umweg über einen Server

Variablen, Verschachtelung, Mixins und integrierte Module wie sass:color werden wie in der lokalen CLI kompiliert

Ein Projektordner lässt sich bündeln, dabei werden lokale Partials per @use / @import aufgelöst, ohne Dateien von Hand zu verketten

Ausgabestil expanded oder compressed bei SCSS, Schalter zum Komprimieren bei LESS und optionale Inline-Source-Maps bei Einzeldateien

Klare Grenzen: Es gibt weder node_modules noch CDN-Imports und beim Bündeln keine Source Maps

Danach SCSS oder LESS formatieren oder entminifizieren und das CSS für den Rest der Pipeline minifizieren

Wann im Browser kompilieren und wann nicht

Geeignete Fälle

Der Compiler ist ein Skalpell, keine Produktionsfabrik.

Ein Mixin oder Token in einer PR prüfen, ohne das Repo zu klonen

Ein Design-System-Beispiel in CSS verwandeln, das CMS oder E-Mail-Templates einfügen können

Variablen, Verschachtelung und Mixins unterrichten, mit CSS-Rückmeldung beim Arbeiten

Compressed vs. expanded prüfen, bevor Sie eine Build-Option ändern

Einen in sich geschlossenen Partial-Ordner kompilieren, den Sie ablegen können (ohne npm)

Dem Build überlassen

Wenn die Antwort von Paketen, Alias-Pfaden oder dem vollständigen Graphen der Anwendung abhängt, in der CI bleiben.

Stylesheets, die npm-Pakete oder einen Monorepo-Load-Path @use

Vite/webpack als einzige CSS-Pipeline einer App ersetzen

Compressed-Sass-Output als Ersatz für CSSO / cssnano behandeln

LESS-Inline-JavaScript bei Code aktivieren, den Sie nicht geschrieben haben

Source Maps von einem abgelegten Projekt-Bundle erwarten (diese Version erzeugt keine)

Kompilierfehler, die einen ganzen Nachmittag kosten

Die App starten, um zwölf Zeilen zu kompilieren

Ein Design-System-Token, ein einmaliges Mixin oder ein Kommentar in einer Prüfung brauchen weder Vite noch webpack noch ein Docker-Image mit Node. Die Kosten: Installation, Cache und der gesamte CSS-Graph, obwohl Sie nur sehen wollten, was aus $spacing * 2 wird.

Den Produktions-Build nur starten, um einen verschachtelten Selektor zu prüfen

Einen Kollegen bitten, zu pullen und yarn auszuführen, damit er kompiliertes CSS in der PR lesen kann

Die Prüfung überspringen, weil Sass auf dem Rechner der prüfenden Person fehlt

Rohes SCSS in ein CMS-Feld kleben, das nur CSS akzeptiert

Fügen Sie das Snippet in den Compiler im Browser ein, lesen Sie das CSS und fügen Sie dieses CSS (oder eine Variante im Stil compressed) dort ein, wo der Host CSS erwartet, nicht SCSS.

Erwarten, dass @use "bootstrap" aus npm aufgelöst wird

Die Dart-Sass-Modul-Syntax funktioniert. Was im Browser nicht funktioniert, ist Paketauflösung. FastMinify liest nie den Datenträger außerhalb des abgelegten Ordners und holt weder node_modules noch GitHub noch ein CDN.

@use "bootstrap" oder @import "~bootstrap" schreiben und denselben Graphen wie webpack erwarten

Annehmen, ein abgelegter Ordner enthalte magisch Elternverzeichnisse oder verlinkte Pakete

Ein integriertes Modul wie @use "sass:color" mit einem Dateimodul wie @use "./tokens" verwechseln

Das Bündeln wie eine Verkettung behandeln: Die Dateireihenfolge ist keine manuelle Liste, denn Sass startet bei einer Einstiegsdatei

Der Compiler meldet ein fehlendes Modul. Das ist normal: Kopieren Sie die lokalen Partials, die Sie wirklich brauchen, in den abgelegten Ordner, oder kompilieren Sie ein Snippet ohne npm-Abhängigkeit.

Kompilierung "Minifizierung" nennen

SCSS/LESS → CSS ist eine Sprachtransformation. CSS → kleineres CSS ist ein Schritt der Minifizierung (Leerraum, Kommentare, manchmal Umschreiben). Die Ausgabe von Sass im Stil compressed ersetzt CSSO nicht. Überspringen Sie den CSS-Minifizierungsleitfaden nicht, wenn Größe das Ziel ist.

Expanded CSS aus dem Compiler als "Produktions-CSS" ausliefern

Von compressed Sass erwarten, ungenutzte Selektoren zu entfernen oder Farben wie CSSO umzuschreiben

Kompiliertes CSS in „SCSS verschönern“ kleben, ein Werkzeug für SCSS und nicht für CSS-Stylesheets

„SCSS entminifizieren“ auf CSS anwenden, das nie SCSS war

Kompilieren Sie zuerst und minifizieren Sie dann mit dem CSS-Minifier. Wenn Sie minifiziertes SCSS oder LESS wieder lesen müssen, nutzen Sie das passende Werkzeug zum Entminifizieren: Es formatiert, bringt aber Original-Variablennamen nicht zurück.

$variables und @variables im selben Text mischen

SCSS-Variablen beginnen mit $, Mixins nutzen @mixin / @include. LESS-Variablen beginnen mit @, Mixins sehen aus wie Klassendefinitionen. Dart Sass liest kein LESS und less.js liest kein SCSS.

LESS in den SCSS-Compiler kleben, weil "es alles CSS mit Extras ist"

SCSS-Interpolation #{ } in einer LESS-Datei verwenden

Vergessen, dass SCSS in einer Einzeldatei geschweifte Klammern nutzt: Eingerücktes .sass gehört in ein gebündeltes Projekt

LESS-Inline-JavaScript bei nicht vertrauenswürdiger Quelle aktivieren

Sie erhalten einen Syntaxfehler an einem Dollarzeichen oder einer At-Regel, die der andere Compiler nicht kennt. Wählen Sie das passende Werkzeug und schalten Sie LESS-JavaScript nur bei vertrauenswürdiger Quelle ein.

SCSS, LESS und ein echter Build, und was FastMinify wirklich ausführt

Zwei Compiler, zwei Engines

Das SCSS-Werkzeug kompiliert mit Dart Sass (compileString, Syntax scss). Das LESS-Werkzeug kompiliert mit less.js. Die Optionen unterscheiden sich, weil die Engines sich unterscheiden, deshalb gibt es keinen gemeinsamen Schalter „Präprozessor“.

SCSS-Ausgabestil: expanded für lesbares CSS oder compressed für CSS ohne Leerraum, aber nicht compact oder nested

Optionale Inline-Source-Map bei SCSS in einer Einzeldatei; Deprecation-Warnungen ausblenden gilt nur für global-builtin und color-functions

LESS: Compress-Schalter, optionale Inline-Source-Map, Strict Math (Klammern um Berechnungen), Inline-JS standardmäßig aus

Integrierte Sass-Module (sass:color, sass:math, …) funktionieren in einem einzelnen Text; @use/@import von Dateien brauchen Projekt bündeln

Einzeldatei oder gebündeltes Projekt

Im Modus Einfügen gibt es einen einzigen Puffer. Das Bündeln besteht aus einer Einstiegsdatei plus den lokalen Dateien, die Dart Sass oder Less tatsächlich erreicht. Das ist keine Verkettung. In dieser Version gelten eine Einstiegsdatei, keine Source Maps, keine Paketauflösung sowie 32 MiB pro Datei und 32 MiB insgesamt. Ein einzelner Text ist auf 512 KiB begrenzt, wie andere Eingaben dieser Größe auf der Seite.

SCSS in einer Einzeldatei: nur .scss mit geschweiften Klammern. Eingerücktes .sass ist in einem gebündelten Projekt gültig, wenn die Einstiegsdatei (oder ein Partial) auf .sass endet

Gebündelte SCSS-Projekte lösen lokale @use und @import auf, gebündelte LESS-Projekte lokale @import

Ungenutzte Dateien im abgelegten Ordner werden aufgelistet und nicht stillschweigend verkettet

Zirkuläre LESS-Imports scheitern mit einer Pfadkette: Beheben Sie den Zyklus, statt die Dateireihenfolge zu ändern

Der Online-Compiler im Vergleich mit der sass-CLI, Vite und webpack

Nutzen Sie den Browser, wenn die Frage lautet „Welches CSS erzeugt dieses Snippet?“. Nutzen Sie die Toolchain des Projekts, wenn die Frage lautet „Welches CSS liefert diese App aus?“. npm-Pakete, Glob-Imports und Load-Path-Aliase gibt es nur dort. Ein Online-Compiler ist trotzdem kein Bundler. Siehe auch Online-Minifier vs. Build-Tools.

FastMinify: keine Installation, kein Konto, ein lokaler Tab und Rückmeldung zum Snippet beim Arbeiten

sass-CLI / lessc: voller Zugriff auf den Datenträger, Load Paths und dieselben Engines wie in der CI

Vite und webpack: Watch, aufgesplittetes CSS, PostCSS und Produktions-Minify in einem Graphen

Ein Online-Minifier ist immer noch kein Bundler

Was SCSS und LESS tatsächlich kompilieren

Variablen und Nesting

Eine Variable wird ersetzt, verschachtelte Selektoren werden abgeflacht. Genau das will ein Review-Snippet mit 20 Zeilen: das CSS sehen, das ein Browser verarbeitet, und nicht den Zucker beim Schreiben.

Vorher

$brand: #336699;
$spacing: 8px;

.card {
  padding: $spacing;
  .title { color: $brand; }
}

Nachher

.card {
  padding: 8px;
}
.card .title {
  color: #336699;
}

Variablen werden ersetzt: $brand und $spacing in SCSS, @base und @gap in LESS (inklusive einfacher Operationen wie 8px + 4px)

Die Verschachtelung wird zu CSS mit Nachfahren- oder Parent-Selektoren kompiliert, nicht zu einem CSS-Nesting-Polyfill zur Laufzeit

Der Parent-Selektor & wird von der Engine aufgelöst; erwarten Sie kein CSS Nesting in der Ausgabe

Expanded behält Zeilenumbrüche; compressed bleibt Kompilierung, nicht CSSO

Mixins (und LESS-Guards)

Ein Mixin wird an jede Include-Stelle kopiert. FastMinify kompiliert dieselben Konstrukte wie lokal: SCSS @mixin / @include, LESS-parametrische Mixins und LESS-Guards wie when (@size > 12px).

Vorher

@mixin rounded($radius: 4px) {
  border-radius: $radius;
}

.btn {
  @include rounded(8px);
  background: #eee;
}

Nachher

.btn {
  border-radius: 8px;
  background: #eee;
}

SCSS-Mixins nehmen Argumente und Standardwerte, verschwinden aber im CSS: Nur Deklarationen bleiben übrig

LESS-Mixins sehen oft wie Klassennamen mit Klammern aus, sind aber keine zusätzlichen Klassen in der Ausgabe, außer Sie rufen sie so auf

Guards lassen den Mixin-Body weg, wenn die Bedingung falsch ist, was in einer Demo nützlich, in einem Pull Request aber leicht misszuverstehen ist

Ein Mixin, das Dateien @include, die Sie nicht abgelegt haben, scheitert beim Bündeln aus demselben Grund wie jeder fehlende Pfad

Integrierte Funktionen oder Dateien auf dem Datenträger

@use 'sass:color' ist ein integriertes Modul und kompiliert daher im Modus Einfügen. @use './tokens' ist ein Datei-Modul: Legen Sie den Ordner ab, wählen Sie die Einstiegsdatei und lassen Sie Dart Sass die erreichbaren .scss- / .sass-Partials durchlaufen. LESS hat kein Sass-Modulsystem. Es nutzt @import für lokale .less-Dateien, wenn Sie ein Projekt bündeln.

Vorher

@use 'sass:color';

$base: #336699;
.link {
  color: color.adjust($base, $lightness: -10%);
}

Nachher

.link {
  color: rgb(38.25, 72.75, 114.75);
}

sass:color, sass:math und andere Built-ins brauchen keinen abgelegten Ordner

Partials mit Unterstrich (_buttons.scss) werden so aufgelöst, wie es Dart Sass immer tat: Legen Sie sie mit ab

Entfernte url()-Imports und ~package-Aliase werden nicht unterstützt

Wenn das Snippet kompiliert, das Repository aber nicht, hängt es von einem Paket ab, das der Browser nicht sieht

Im Tab kompilieren, vom Snippet über lokale Partials bis zum CSS

Ein Snippet kompilieren

Öffnen Sie den SCSS-Compiler oder den LESS-Compiler. Beim Einfügen wird automatisch kompiliert. Nach dem Tippen wählen Sie Kompilieren oder drücken ⌘↵ (anderswo Strg+Eingabe), denn das Kompilieren bei jedem Tastendruck ist absichtlich ausgeschaltet. Grenze: 512 KiB für einen einzelnen Text.

Zuerst die Präprozessor-Quelle einfügen

SCSS mit geschweiften Klammern im SCSS-Werkzeug, LESS im LESS-Werkzeug. Laden Sie ein Beispiel, wenn Sie nur den Ablauf sehen wollen.

Danach die Ausgabeoptionen einstellen

Wählen Sie bei SCSS expanded oder compressed, optional mit Source Map und ausgeblendeten Deprecation-Warnungen. Bei LESS stehen Komprimierung, Source Map und Strict Math zur Wahl, Inline-JavaScript nur bei vertrauenswürdiger Quelle.

Zum Schluss CSS, Bytes und Zeilen lesen

Das Ergebnispanel zeigt kompiliertes CSS plus Ein-/Ausgabegröße. CSS in die PR, das CMS oder das nächste FastMinify-Tool kopieren.

Ein lokales Partial-Projekt bündeln

Wählen Sie Projekt bündeln, legen Sie den Ordner ab und wählen Sie eine Einstiegsdatei. Dart Sass löst lokale @use / @import auf, Less löst lokale @import auf. Die Pfade bleiben innerhalb dieses Ordners relativ. Source Maps gibt es beim Bündeln in dieser Version nicht. Grenzen: 32 MiB pro Datei und 32 MiB insgesamt, eine Einstiegsdatei.

Das ist keine Verkettung von Stylesheets: Nicht erreichbare Dateien bleiben ungenutzt

Eingerücktes .sass ist in einem SCSS-Bundle gültig; der Einzeldatei-Editor ist nur SCSS

node_modules, Pakete und entfernte URLs werden nicht aufgelöst: Kopieren Sie die nötigen Partials

Fehler enthalten Zeile/Spalte und im Bundle den virtuellen Pfad der fehlschlagenden Datei

Nach dem CSS formatieren, entminifizieren und minifizieren

Kompilierung beantwortet "welches CSS ist das?". Formatierung und Größe sind absichtlich getrennte Tools.

Unübersichtliches SCSS vor dem Kompilieren: SCSS verschönern oder LESS verschönern

Minifizierte Präprozessor-Quelle zum Lesen: SCSS entminifizieren / LESS entminifizieren. Sie formatieren nur, verlorene Namen bleiben verloren

Größe des Produktions-CSS: CSS minifizieren nach dem Kompilieren. Das ist Minifizierung auf CSSO-Niveau, nicht der Stil compressed von Sass

Hub-Überblick: CSS-Präprozessoren

Wann der Browser reicht und wann Sie trotzdem die CLI brauchen

sass CLI (Dart Sass) für das Repo, das Sie ausliefern

Wenn der Stylesheet-Graph npm-Pakete, gemeinsame Load Paths oder einen CI-Job enthält, lassen Sie dasselbe Dart Sass wie im Browser auf dem Datenträger laufen. FastMinify liefert die Vorschau, die CI ist die maßgebliche Quelle für den Inhalt des Produktions-CSS.

Einfaches Beispiel

npm install --save-dev sass
npx sass src/styles/main.scss dist/main.css --style=expanded

lessc für einen LESS-Baum mit node_modules

less.js im Browser passt zu einem Snippet. Ein LESS-Baum aus der Bootstrap-Zeit mit @import "bootstrap" braucht lessc und die Pakete auf dem Datenträger, und FastMinify lädt sie nicht herunter.

Einfaches Beispiel

npm install --save-dev less
npx lessc src/styles/app.less dist/app.css

Vite oder webpack, die Pipeline der App

Vite kompiliert ?inline- und .scss-Imports über den Modulgraphen, und webpack nutzt sass-loader / less-loader. Dort gehören PostCSS, Purge und CSS-Minifizierung für eine Anwendung hin. Die Werkzeuge im Browser bedienen das isolierte Snippet und den Ordner, den Sie ablegen können, und ersetzen den Bundler nicht. Abwägung gegenüber einem reinen Online-Ablauf: Installationsaufwand, dafür Paketauflösung und Watch-Modus.

FastMinify compile-scss-to-css / compile-less-to-css

Keine Installation, kein Upload, Dart Sass und less.js im Tab, dazu das lokale Bündeln von Partials. Abwägung: 512 KiB beim Einfügen und 32 MiB beim Bündeln, kein npm, keine Source Maps beim Bündeln. Nutzen Sie es zum Prüfen, Unterrichten und Weiterkommen auf einem Rechner ohne Node und minifizieren Sie das CSS, wenn Sie das Ergebnis ausliefern.

Zusammenfassung

SCSS und LESS bleiben als Sprachen zum Schreiben nützlich, mit Variablen, Verschachtelung und Mixins, aber eine vollständige Node-Installation sollte nicht nötig sein, um das CSS eines Snippets zu sehen. FastMinify führt Dart Sass und less.js im Browser aus, optional über einen abgelegten Ordner lokaler Partials, mit klaren Grenzen: kein node_modules, keine Source Maps beim Bündeln, 512 KiB beim Einfügen und 32 MiB beim Bündeln. Kompilieren Sie und formatieren oder minifizieren Sie danach mit den passenden CSS-Werkzeugen. Die Produktions-App gehört weiterhin zu Vite, webpack oder der Sass-CLI. Beginnen Sie im CSS-Präprozessoren-Hub und lesen Sie den CSS-Minifizierungsleitfaden, wenn als Nächstes die Größe und nicht die Syntax das Problem ist.

Jetzt SCSS oder LESS kompilieren

SCSS zu CSS kompilieren LESS zu CSS kompilieren CSS minifizieren CSS-Präprozessoren-Hub

Snippet einfügen, um das CSS zu lesen; Ordner nur ablegen, wenn die @use/@import-Dateien lokal sind

Erwarten Sie nicht, dass npm-Pakete oder CDN-Imports im Tab aufgelöst werden

Die Ausgabe im Stil compressed als engeres CSS behandeln, nicht als CSSO-Minifizierung

LESS-Inline-JavaScript aus lassen, außer die Quelle ist vertrauenswürdig

Das Anwendungs-CSS aus der Toolchain des Repositorys ausliefern und FastMinify zum Prüfen, Unterrichten und Weiterkommen nutzen

Teilen Sie diesen Artikel

Teilen Sie diesen Artikel:

SCSS oder LESS außerhalb des Projekts kompilieren

Wann im Browser kompilieren und wann nicht

Kompilierfehler, die einen ganzen Nachmittag kosten

SCSS, LESS und ein echter Build, und was FastMinify wirklich ausführt

Was SCSS und LESS tatsächlich kompilieren

Vorher

Nachher

Vorher

Nachher

Vorher

Nachher

Im Tab kompilieren, vom Snippet über lokale Partials bis zum CSS

Zuerst die Präprozessor-Quelle einfügen

Danach die Ausgabeoptionen einstellen

Zum Schluss CSS, Bytes und Zeilen lesen

Wann der Browser reicht und wann Sie trotzdem die CLI brauchen

Einfaches Beispiel

Einfaches Beispiel

Zusammenfassung

Verwandte Artikel