SCSS to CSS Compiler - Free Online Sass Compiler

Paste SCSS on the left and get plain CSS on the right, compiled by the official Dart Sass engine entirely in your browser. Variables, nesting and & parent selectors, mixins, @each/@for loops, maps and the built-in modules such as sass:math and sass:color all work, and the indented .sass syntax is one dropdown away. Errors report the line and column while the last good output stays on screen. Files loaded with @use or @import cannot be fetched here, so the tool flags them and asks you to paste their contents. Writing Less instead? Use the LESS → CSS Compiler. Tidy the result with the CSS Formatter, or translate utility classes with Tailwind → CSS.

What the compiler supports

This is the same Dart Sass that ships in the sass npm package, so anything that compiles with the sass CLI from a single self-contained file compiles here: variables and # interpolation, nesting and parent selectors, placeholder selectors with @extend, @mixin/@include with default and keyword arguments and @content blocks, control flow (@if, @each, @for, @while), functions declared with @function, maps, and every built-in sass: module. @debug and @warn output and deprecation notices appear in the yellow panel instead of being swallowed.

What it does not do

It cannot load other stylesheets: @use, @forward and Sass @import of a partial, an npm package or a URL all fail, because there is no file system in the browser and the tool deliberately makes no network requests for your code. It does not emit source maps, does not run custom Sass functions, and does not post-process the CSS with Autoprefixer — add vendor prefixes yourself or run the output through your build.

Frequently asked questions

Which Sass compiler is this, and does my code leave the browser?

It is Dart Sass — the official, reference Sass implementation (version 1.104.0) compiled to JavaScript. It is downloaded once on your first compile (about 0.7 MB over the wire) and then everything — parsing, variables, mixins, @use, color functions — runs inside this tab. Your SCSS is never uploaded anywhere, and the tool makes no network requests once the compiler has loaded.

Why does @use "bootstrap" or @import "variables" fail?

There is no file system in a browser tab and this tool does not fetch files from the network, so a stylesheet load has nothing to resolve to. Any @use, @forward or @import of a non-built-in module fails with "module 'x' not available in the browser playground; paste its contents", and the tool lists the offending modules above the editor. Paste the file's contents in place of that line and it compiles. Plain CSS imports — @import "x.css", url(...) or an http(s) URL — are passed through to the output untouched, exactly as Sass does.

Do the built-in modules like sass:math and sass:color work?

Yes. sass:math, sass:color, sass:string, sass:list, sass:map, sass:selector and sass:meta are built into the compiler rather than loaded from disk, so they all work here. The pre-filled sample uses math.div() and color.adjust() to prove it.

What is the difference between the SCSS and indented Sass options?

They are the two Sass syntaxes. SCSS (.scss files) uses braces and semicolons and is a superset of CSS. The indented syntax (.sass files) uses indentation instead of braces, newlines instead of semicolons, and writes mixins as = and + instead of @mixin and @include. Pick the one that matches the file you are pasting — the compiler cannot auto-detect it, and pasting SCSS while "Indented" is selected will produce a syntax error.

What do the output styles do, and are source maps available?

Expanded is the readable one-declaration-per-line format; Compressed strips whitespace and shortens values, which is what you would ship. Those are the only two styles Dart Sass supports today — the old "nested" and "compact" styles were removed from Dart Sass. This tool does not produce source maps; it returns CSS only.

SCSS → CSS Compiler