CSS Tools
SCSS / Sass to CSS Compiler
The real dart-sass compiler in a browser tab — mixins, functions, @use and nesting evaluated, not approximated.
In short
Compile SCSS or indented Sass to CSS with the real dart-sass engine: mixins, functions, @use modules and nesting evaluated, errors reported by line.
By NaveenKumar T · Updated
Learn: Sass vs SCSS vs LESS vs Stylus: Choosing a CSS Preprocessor
- Real dart-sass engine
- Mixins, functions & @use
- SCSS and indented .sass
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
SCSS / Sass to CSS: input and output
A card component that exercises the parts a rewriter cannot fake: two @use modules, a Sass map, a parametric mixin with a default argument, math.div() and BEM-style & nesting.
@use "sass:math";
@use "sass:map";
$brand: #4f46e5;
$radius: 12px;
$breakpoints: (sm: 640px, md: 768px);
@mixin card($pad: 1rem) {
padding: $pad;
border-radius: $radius;
box-shadow: 0 math.div($pad, 2) $pad rgba(15, 23, 42, 0.12);
}
.card {
@include card(1.5rem);
background: #fff;
&__title {
margin: 0 0 0.5rem;
color: $brand;
}
&:hover {
box-shadow: 0 0 0 2px $brand;
}
@media (min-width: map.get($breakpoints, md)) {
@include card(2rem);
}
}.card {
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.12);
background: #fff;
}
.card__title {
margin: 0 0 0.5rem;
color: #4f46e5;
}
.card:hover {
box-shadow: 0 0 0 2px #4f46e5;
}
@media (min-width: 768px) {
.card {
padding: 2rem;
border-radius: 12px;
box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.12);
}
}The @include lines are gone and their declarations inlined twice with different padding, math.div(1.5rem, 2) is computed to 0.75rem, map.get($breakpoints, md) resolves to 768px inside the @media prelude, and &__title and &:hover are assembled into .card__title and .card:hover — none of which a text-level converter can produce.
Learn more
What the compiler actually does
This page runs dart-sass, not a rewriter that imitates it. @mixin definitions are expanded at every @include, @function bodies are evaluated, control directives (@if, @each, @for, @while) execute, Sass maps are resolved with map.get(), @extend rewrites the selector lists it applies to, and arithmetic goes through the real number system — math.div($x, 2) with its units intact, not a string substitution.
Both Sass syntaxes are accepted. Brace-and-semicolon SCSS is the common case and the default; paste an indented .sass file — no braces, no semicolons, structure carried by whitespace — and it is detected automatically, or pin the syntax from the toolbar. The output style toggle mirrors the CLI's: expanded while you are reading and diffing, compressed when you are about to ship the result.
Errors are compiler errors, reported with the line and column dart-sass itself gives: an undefined variable, a mixin called with the wrong number of arguments, an unclosed brace, an invalid unit operation. That makes the page a genuinely fast syntax check for a snippet you are about to commit — faster than starting a watcher to find out that line 34 has a typo.
The one limitation: no file system
A browser tab has nowhere to load @use "./variables" or @import "mixins" from, so those lines stop the compile with "Can't find stylesheet to import". The built-in modules are a different matter — sass:math, sass:color, sass:map, sass:list, sass:string and sass:meta ship inside the compiler and behave exactly as they do on your machine.
The workaround is mechanical: concatenate the partial above the file that uses it and compile the combined snippet. That covers the realistic use cases — one component, a mixin you want to see expanded, a documentation example, a bug reproduction — while anything with a genuine dependency graph belongs in your build pipeline where the resolver can do its job.
When compiling Sass in a browser is the right move
The recurring reasons are independence and inspection. Independence: a component's styles have to land somewhere no Sass build exists — a CMS custom-CSS field, an email template, a web component, an embed, a CodePen reproduction — and compiled CSS is the only thing that will work there. Inspection: you want to see what a mixin, an @extend or four levels of nesting actually generate, which is the fastest way to catch a selector that turned out far more specific than intended.
For the opposite direction — plain CSS you want nested and variable-ised — use the CSS to SCSS / Sass converter. To move a stylesheet sideways between preprocessor dialects rather than down to CSS, the CSS preprocessor converter handles LESS, SCSS, Sass and Stylus in every direction, and SCSS formatter tidies a sheet without compiling it at all.
Help
Frequently asked questions
Everything you need to know about the SCSS / Sass to CSS.
01How do I compile SCSS to CSS?
Paste your SCSS (or load a .scss/.sass file) and press Compile. dart-sass runs inside this page and the compiled CSS appears on the right, ready to copy or download. Nothing leaves your machine — the compiler is JavaScript executing in your browser, not a server call.
02Is this the real Sass compiler, or an approximation of one?
It is dart-sass — the reference implementation, the same engine the sass CLI and your build tooling run — compiled to JavaScript. @mixin and @include are expanded, @function bodies execute, @if/@each/@for/@while run, maps resolve, @extend rewrites selectors, and the sass:math, sass:color, sass:map, sass:list, sass:string and sass:meta modules all work. The output is byte-for-byte what sass would write to disk for the same input.
03Can I paste indented .sass files, and what does the syntax toggle do?
Yes. On Auto the page looks for braces and semicolons: a snippet with neither is compiled as indented Sass, anything else as SCSS. That is right almost always, and when it is not — a one-line SCSS rule, or indented Sass whose only line happens to contain a semicolon inside a string — pin the syntax with the toggle. The toggle also settles ambiguous fragments you paste out of documentation, where a single rule reads equally well as either syntax.
04Why does @use "./tokens" fail with "Can't find stylesheet to import"?
Because a browser tab has no file system to resolve relative paths against. Built-in modules are inside the compiler and work normally (@use "sass:math", "sass:color", "sass:map", …), but @use and @import of your own partials have nothing to load. Paste the partial's contents above the code that needs it and compile the combined snippet, or keep multi-file sheets in your real build.
05What is the difference between Expanded and Compressed output?
The same two output styles the sass CLI offers. Expanded is one declaration per line with the selectors indented — what you want for reading a compiled result, diffing it, or pasting it back into a project. Compressed strips every optional byte onto a single line, which is what you would ship. Neither changes which rules are produced; only whitespace differs, so pick whichever the next step needs.
Keep working