Compile SCSS to CSS Online — Dart Sass Browser Compiler

Compile one SCSS snippet or bundle a local project folder with native @use and @import resolution in your browser. Output style, source maps for single files and deprecation warnings are configurable, and nothing is uploaded.

Loading…
SCSS compiler — browser playbook
Compile SCSS snippets to standard CSS before minifying or sharing. Ideal when Sass CLI is not installed or you need a quick preview.

Developer notes

The single-file editor uses SCSS syntax; project bundles also accept indented .sass files. Drop a project folder to resolve local @import / @use paths. node_modules, packages and remote URLs are not resolved. Auto-compile runs on paste and sample load; typed edits require Compile (⌘↵). Source maps are inlined for single files and unavailable in bundle mode v1. Pair with beautify-scss or minify-css for the full pipeline.

Bundle local partials

Choose Bundle project, drop a folder, then select one entry file. FastMinify preserves relative paths and lets Dart Sass discover reachable .scss and .sass partials through @use or @import. The browser-local bundle is limited to 32 MiB per file and 32 MiB total. Version 1 has one entry, no source maps and no node_modules package resolution.

Options

Output style
Controls CSS formatting: expanded (readable), compressed (minified), compact, or nested.
Source map
Appends an inline data: URI sourceMappingURL comment to the CSS output for debugging.
Silence deprecations
Hides Sass deprecation warnings in the console for legacy built-in functions.

When teams pick this route

Convert a SCSS snippet from a design system doc to plain CSS. Preview compressed output before pasting into a CMS. Teach SCSS variables and nesting with instant CSS feedback. Prototype mixins without installing Dart Sass locally.

Worked examples

Variables and nesting

SCSS input

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

Compiled CSS

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

Mixin with parameters

SCSS input

@mixin rounded($radius: 4px) { border-radius: $radius; } .btn { @include rounded(8px); background: #eee; }

Compiled CSS

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

Navigate related tools

Beautify SCSS with beautify SCSS, decompress with unminify SCSS, or browse the CSS preprocessors hub.

SCSS compiler FAQ

Browser-only compilation

Why can't I use @import for external libraries?

Project bundles resolve local files that you drop into the browser. Paths to node_modules, packages, CDNs or files outside that dropped folder are not available.

Does it support indented SASS syntax?

The single-file editor uses SCSS curly-brace syntax. Project bundle mode also accepts .sass files and loads them with indented syntax.

When does compilation run automatically?

On paste and when loading a sample. While typing, use the Compile button or ⌘↵ — live compilation on every keystroke is intentionally disabled.

Is a project bundle the same as concatenating files?

No. Dart Sass starts from one entry file and resolves only the @use and @import dependencies it reaches. File order is not manually concatenated. Bundle mode v1 is limited to one entry, 32 MiB total, no source maps and no npm package imports.

CSS preprocessors

Compile SCSS or LESS to standard CSS in the browser — pair with beautify or minify for a full stylesheet workflow.

Explore other tool categories