SCSS Compiler

Compile SCSS to CSS with Dart Sass, expanded or compressed.

Output

SCSS

CSS

SCSS Compiler – SCSS to CSS Online

Turn SCSS into browser-ready CSS without installing Node.js or a build tool. This compiler uses Dart Sass, the official and actively developed Sass implementation (the older LibSass and Ruby Sass are deprecated), running entirely in your browser. Pick Expanded for readable CSS or Minified for Dart Sass's compressed style.

SCSS features supported

Everything that works in your build works here, as long as it lives in one file:

$variables, !default, and !global
nesting, the parent selector &, and suffixes like &-title
@mixin / @include with arguments, defaults, and @content blocks
@extend and %placeholder selectors
control flow: @if, @else, @each, @for, @while
@function and @return
maps and the built-in modules: @use "sass:math";, sass:color, sass:map, sass:list, sass:string

Error messages

When something is wrong – an undefined variable, a missing brace, a wrong argument – the compiler shows Dart Sass's message with the exact line and column. Deprecation notices are hidden so you only see what matters.

SCSS or Sass?

Both are the same language with two syntaxes. SCSS uses braces and semicolons and accepts any valid CSS, which is why it is by far the more popular choice. Sass (the indented syntax) uses indentation instead. If your files end in .sass, use the Sass Compiler; to switch syntax, try SCSS to Sass.

Limitations

Imports of other local files (@use "variables") cannot be resolved in the browser; merge them into one input. Built-in modules such as sass:math work normally.

Need to go the other way? Switch to CSS → SCSS to turn flat CSS into nested SCSS.

Frequently Asked Questions

Which Sass implementation does this compiler use?

Dart Sass, the reference implementation maintained by the Sass team. LibSass and node-sass are deprecated and lack newer features such as @use and the module system.

Can I use @use "sass:math"?

Yes. Built-in modules (sass:math, sass:color, sass:map, sass:list, sass:string, sass:selector, sass:meta) are part of the compiler and work offline.

Why do I get "Can't find stylesheet to import"?

The compiler runs in your browser and cannot open other files from your project. Paste the content of partials such as _variables.scss into the editor.