How to use the SCSS to CSS Compiler
- Paste your SCSS — or switch to the indented Sass syntax.
- The CSS compiles as you type; errors show the line and column.
- Choose expanded or minified output and copy or download the CSS.
What the compiler handles
This is Dart Sass, the reference implementation of Sass, running in your browser. Everything in the language works: variables, nesting with &, mixins and @include, @extend, functions, maps, loops, @if conditions, and the module system with @use for the built-in modules such as sass:math and sass:color.
SCSS vs indented Sass
SCSS is a superset of CSS with braces and semicolons — any valid CSS is valid SCSS. The older indented syntax (.sass files) uses indentation instead of braces and newlines instead of semicolons. Both compile to the same CSS; pick the one your files use.
Imports of other files
A browser can’t read the other files in your project, so @use "variables" or @import "mixins" of your own partials won’t resolve here. Paste the partials’ content above the code that uses them. Deprecation warnings from Sass — for example for darken() — are shown under the output with the suggested replacement.
Private by design
Compilation runs entirely in your browser — your code is never uploaded, so it’s safe for proprietary projects.
Tools that pair well with the SCSS to CSS Compiler
- LESS to CSS Compiler — Paste Less code and get plain CSS, compiled by the official Less.js engine in your browser — handy for maintaining Bootstrap 3 themes and older projects.
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- CSS Minifier — Paste a stylesheet to shrink it instantly.
- CSS to Tailwind Converter — Paste CSS rules or declarations and get the equivalent Tailwind utility classes for each selector — including hover: states and arbitrary values like p-[13px].
Frequently asked questions
Is this the real Sass compiler?
sass command line.