Does this send my code anywhere?

No. Compilation runs entirely in your browser using a small hand-written parser.

Is this the same as this site's Sass Compiler tool?

No. The Sass Compiler tool uses Dart Sass to compile the full SCSS language (mixins, functions, control directives, and more). This tool is a separate, lightweight, dependency-free parser scoped to only nesting, &, variables, and comments, for quick previews without pulling in a full compiler.

What SCSS features does it support?

Nested selectors, & parent-selector references (including combinators like & > .child), $variable declarations and substitution, and // line comments (stripped, since they aren't valid in plain CSS).

What happens if I paste a mixin, @if, or @import?

It's reported as a clear, explicit error rather than silently mishandled or dropped, since those Sass features are out of scope for this lightweight subset parser.

SCSS Compiler - Nesting, Variables & Comments to Plain CSS

Overview

Introduction

Not every SCSS snippet needs a full Sass toolchain; sometimes you just want to flatten a few nested selectors and substitute a couple of variables.

This tool compiles that common subset of SCSS to plain CSS with a small hand-written parser, entirely in your browser.

What Is SCSS Compiler?

A lightweight, dependency-free SCSS subset compiler covering nested selectors, & parent-selector references, $variable declarations/substitution, and // line comments.

It's deliberately scoped smaller than a full Sass compiler: mixins, @if/@each/@for, functions, and @import/@use are out of scope and reported as an explicit error.

How SCSS Compiler Works

// comments are stripped first (careful not to treat the // in a url(http://...) as a comment), then $variable declarations are extracted and substituted into the remaining text.

The remaining braces are parsed recursively into nested rule blocks, and each nested selector is resolved against its parent: & is replaced with the parent selector text directly, and any other nested selector combines with its parent as a descendant selector.

When To Use SCSS Compiler

Use it for a quick, dependency-free preview of how a few nested selectors and variables flatten to plain CSS.

Use the Sass Compiler tool instead if the snippet uses mixins, functions, @if/@each, or other full Sass features; this tool intentionally doesn't support those.

Often used alongside Sass Compiler, LESS Compiler and CSS Formatter.

Features

Advantages

Runs entirely client-side with no compiler dependency, just a small hand-written parser.
Handles & combinators (like &:hover or & > .child), not just simple concatenation.
Reports unsupported Sass features (mixins, control directives, imports) with a clear error instead of silently producing incorrect CSS.

Limitations

This explicitly does not support mixins, @if/@else/@each/@for, functions, @import/@use, or @extend; use the full Sass Compiler tool (built on Dart Sass) for those.
Variable substitution is flat and global: it doesn't track scoping, so a variable redeclared inside a nested block will override it everywhere the substitution pass runs, not just within that block.
Comma-separated compound selectors are supported, but Sass placeholder selectors (%name) and maps aren't.

Examples

Nesting with a variable

Input

$primary: blue;
.card {
  color: $primary;
  .title { font-weight: bold; }
}

Output

.card {
  color: blue;
}

.card .title {
  font-weight: bold;
}

$primary is substituted before parsing, and the nested .title selector flattens into a descendant combinator.

& parent-selector reference

Input

.btn {
  &:hover {
    color: red;
  }
}

Output

.btn:hover {
  color: red;
}

& is replaced directly with the parent selector text, producing a concatenated compound selector rather than a descendant combinator.

Best Practices & Notes

Best Practices

Keep variables at the top level so their scope is unambiguous, since substitution here doesn't track nested scoping.
If compilation reports an unsupported directive, switch to the full Sass Compiler tool rather than trying to work around the subset here.
Run the result through the CSS Formatter afterward if you want consistent property-per-line formatting.

Developer Notes

A small recursive-descent-style parser splits nested `{ }` blocks by hand (tracking brace depth) rather than depending on a real Sass/PostCSS AST, keeping this tool dependency-free and distinct from the full Dart Sass-backed Sass Compiler tool.

SCSS Compiler Use Cases

Quickly previewing how a few nested selectors and & references flatten to plain CSS
Substituting a handful of SCSS variables without pulling in a full Sass build
Checking whether a snippet uses only the supported subset before adopting it in a build pipeline that lacks Sass

Common Mistakes

Pasting a snippet with @mixin, @include, or @import and expecting it to compile; those are explicitly unsupported and reported as an error.
Assuming variable scoping works like real Sass; substitution here is flat and global across the whole input.

Tips

If you hit an unsupported-directive error, that's a signal the snippet needs the full Sass Compiler tool, not a bug to work around here.
For deeply nested selectors, double-check the flattened output's specificity; nesting several levels deep in SCSS can produce a longer, more specific selector than you expect.

SCSS Compiler