SCSS to CSS Compiler
Compile SCSS and Sass to CSS online — live preview with nesting, variables, mixins, and source map support
About this tool
Sass (Syntactically Awesome Style Sheets) extends CSS with variables, nested rules, mixins, functions, and control directives — features that make stylesheets more maintainable and DRY. SCSS is the most widely used Sass syntax, and it is a superset of CSS: every valid CSS file is also valid SCSS.
This tool compiles SCSS into plain CSS directly in the browser using the official Dart Sass compiler. Write or paste your SCSS, tweak the output style and indentation, and get clean, production-ready CSS instantly.
Example: input $primary: #6366f1; .btn { background: $primary; } .btn:hover { opacity: 0.9; } compiles to .btn { background: #6366f1; } .btn:hover { opacity: 0.9; } — the $primary variable is resolved and nested selectors are flattened.
FAQ
What Sass features does this tool support? ›
The Dart Sass compiler supports the full modern Sass language: variables, nesting, mixins, functions, the module system, extend, control flow, color functions, math operations, and more. It does not support filesystem-based import (only inline code compilation), and custom importers are not available in the browser build.
What is the difference between Expanded and Compressed output? ›
Expanded produces human-readable CSS with each property on its own line and consistent indentation — ideal for development and debugging. Compressed removes all whitespace, producing a single-line minified output — best for production deployments where every byte counts.
Does this tool generate source maps? ›
Yes. Enable the Source map checkbox to generate a source map alongside the CSS output. Source maps let browser DevTools show you the original SCSS source lines when inspecting compiled CSS, making debugging much easier.
Can I use indented Sass syntax instead of SCSS? ›
This tool compiles SCSS (the CSS-compatible syntax with curly braces). Indented Sass syntax is also supported by Dart Sass and will work if pasted here, though SCSS is the recommended syntax for most new projects.