Does this send my code anywhere?

No. Compilation runs entirely in your browser using Dart Sass.

Does this support @import from other files?

No. Only self-contained SCSS with no external file imports is supported, since there's no filesystem to resolve imports against.

Does it support SCSS features like functions and control directives?

Yes, Dart Sass compiles the full SCSS language, including functions, `@if`/`@else`, `@each`, `@for` loops, and maps. What's missing is resolving `@use`/`@import` of separate files, since no filesystem or import resolver is configured.

Does this compile the indented Sass syntax, or only SCSS?

SCSS syntax, the CSS-like, curly-brace syntax. `sass.compileString()` defaults to SCSS, so the older indented `.sass` syntax isn't what this tool is set up to parse.

Sass Compiler - Compile Sass/SCSS to CSS Online

Overview

Introduction

Sass's nesting, variables, and mixins need to compile down to plain CSS before a browser can use them.

This tool compiles SCSS to CSS directly in your browser using Dart Sass, the official reference implementation.

What Is Sass Compiler?

A Sass-to-CSS compiler using `sass.compileString()`, the same engine behind the `sass` npm package and Dart Sass CLI.

It compiles self-contained SCSS: variables, nesting, mixins, and functions all resolve to plain CSS.

How Sass Compiler Works

Dart Sass parses the SCSS and resolves nesting, variables, and mixins into flat CSS rules.

A syntax or reference error is reported with its source location.

When To Use Sass Compiler

Use it to quickly preview what a Sass snippet compiles to without setting up a build pipeline.

It's also useful for checking how a specific Sass function, `@each` loop, or map lookup compiles before dropping it into a larger stylesheet.

Often used alongside LESS Compiler and CSS Formatter.

Features

Advantages

Runs entirely client-side.
Uses Dart Sass, the official and actively maintained Sass implementation.
Reports the source line and column of a compile error via Dart Sass's error spans, useful for tracking down an undefined variable or mismatched type.

Limitations

No `@import`/`@use` of external files, since there's no filesystem for the compiler to resolve paths against.

Examples

Nesting and variables

Input

$color: #333;
.card {
  color: $color;
  .title { font-weight: bold; }
}

Output

.card {
  color: #333;
}
.card .title {
  font-weight: bold;
}

The variable is substituted and the nested selector is flattened into a descendant combinator.

Best Practices & Notes

Best Practices

Keep snippets self-contained (no external imports) since this tool compiles a single pasted string.
Inline any `@use`d module's variables, functions, or mixins directly into the snippet, since module resolution isn't available without a filesystem.

Developer Notes

Uses `sass.compileString(input, { style: 'expanded' })` from the `sass` package (Dart Sass's pure-JS build), dynamically imported.

Sass Compiler Use Cases

Previewing what a Sass snippet compiles to
Converting a small self-contained SCSS partial to plain CSS

Common Mistakes

Pasting SCSS with `@use` or `@import` of another file and expecting it to resolve, since no filesystem is available.
Mixing indented Sass (.sass) syntax into the input; this tool parses SCSS syntax, so omitting braces and semicolons the way indented Sass does will fail to compile.

Tips

Inline any variables or mixins you'd normally import from another partial before pasting.
Use the reported error's line and column to jump straight to the offending selector or expression rather than re-reading the whole snippet.

Sass Compiler