Overview
Paste SCSS source - variables, nested rules - and get back plain, browser-ready CSS. This uses the official sass package (Dart Sass compiled to JavaScript) running entirely client-side, the same compiler and shared helper used by the SASS Compiler, just told to parse SCSS’s brace-and-semicolon syntax instead of the indented form. No filename is given to the compiler, so @use/@import can never resolve against a filesystem or network address - an unresolvable import fails with a clear compile error rather than attempting to fetch anything. Useful for quickly checking what an SCSS snippet actually compiles to without wiring up a build step.
Best for: Checking what an SCSS snippet compiles to without a build step
How to use this tool
- Paste SCSS. Variables and nested selectors are supported.
- Compiled instantly. The official sass (Dart Sass) package compiles your source to plain CSS in your browser.
- Copy the CSS. Copy the compiled output directly, or fix any reported error and recompile.
Frequently asked questions
This tool compiles SCSS down to plain CSS - variables get resolved, nesting gets flattened. The SCSS Formatter instead re-indents SCSS source while keeping it as SCSS, for when you want to clean up formatting without changing the language.
Since no filename is provided to the compiler, an @use/@import can’t resolve against any local file or remote URL. Compilation fails with a clear error rather than silently succeeding or attempting a network request.
No. Compilation runs entirely in your browser using the sass package’s JavaScript build - nothing you paste is uploaded to a server.