Compile SCSS/Sass to CSS or reverse-convert CSS into structured SCSS with nesting and variables. Instant, free, runs entirely in your browser — your code never leaves your machine.
SCSS (Sassy CSS) is a CSS preprocessor that extends plain CSS with variables, nesting, mixins, functions, and more. Before a browser can read SCSS, it must be compiled into standard CSS. This tool does that compilation directly in your browser — your code never leaves your machine.
The reverse direction (CSS to SCSS) analyses your plain CSS and restructures it into idiomatic SCSS by grouping related selectors into nested blocks and extracting repeated values into $variables at the top of the file.
Convert SCSS → CSS and CSS → SCSS in one tool. Switch direction instantly with the toggle or the ⇄ button.
Strip whitespace and comments for production-ready CSS output — smaller files, faster load times.
Append an inline source map so DevTools can trace compiled CSS back to original SCSS lines during debugging.
Toggle indented (.sass) mode to compile the older Sass syntax with no curly braces or semicolons.
In CSS→SCSS mode, repeated colors and values are automatically pulled into named $variables.
Upload a .scss, .sass, or .css file directly. Download the converted output with one click.
SCSS is a superset of CSS — every valid CSS file is also valid SCSS. It adds:
$primary: #7c6fff; — store values once, use everywherewidth: 100% / 3 computed at compile timedarken(), lighten(), mix(), rgba() and many moreSCSS variables ($var) are compile-time — they disappear from the output after compilation. CSS custom properties (--var) are runtime — they live in the browser, respond to JavaScript, and can adapt to media queries.
Use SCSS variables for design tokens that should never change at runtime (breakpoints, base type scales). Use CSS custom properties for theming, dark mode, and anything that needs to change dynamically — including component variants and user preferences.
When you reverse-convert CSS to SCSS this tool: (1) parses all selectors and groups child selectors under their parents using SCSS nesting, (2) scans all declared values and extracts repeated colors, sizes, and font stacks into $variables at the top, (3) preserves your original comments and formatting intent, and (4) respects your chosen indentation style.
Note: CSS-to-SCSS is a best-effort restructuring. It won't invent @mixin patterns or @extend relationships — those require human judgement. Think of it as a head-start for refactoring legacy CSS into a Sass project.
Both are flavours of the same preprocessor. Sass (indented syntax) uses indentation instead of curly braces and omits semicolons. SCSS uses CSS syntax with braces and semicolons — any CSS file is already valid SCSS. Most modern projects use SCSS. Enable "Indented (.sass)" in this tool to compile the original Sass syntax.
No. All conversion happens entirely in your browser using a JavaScript-based Sass transpiler. Your code never leaves your machine, nothing is logged, and the tool works offline once the page has loaded.
Native CSS has caught up significantly — custom properties, color-mix(), the CSS Nesting spec, @layer, and @scope cover many of SCSS's historical advantages. But SCSS still wins for: compile-time variables for design tokens, mixins with complex logic, @each/@for loops for generating utility classes, and tooling that pre-dates native CSS nesting support. Most large design systems (Bootstrap, Material) still use SCSS internally.
Minification removes all whitespace, newlines, and comments, reducing file size. A 10 KB stylesheet might compress to 7–8 KB minified (plus further gains from server-side gzip). Use minification for production assets; keep the unminified version in source control for readability. If you enable source maps alongside minification, DevTools will still show the original SCSS lines.
The tool compiles self-contained SCSS without external file references. If your SCSS uses @use 'variables' or @forward 'mixins' to import partial files, you'll need a local Sass CLI installation (npm install -g sass) with file system access. As a workaround, inline your partial content before pasting here.
A source map maps positions in compiled CSS back to the original SCSS source. When you inspect an element in browser DevTools, it shows the original SCSS line instead of the compiled output — invaluable for debugging. Enable it during development; disable it in the final production file.
CSS contains no information about the developer's original intent — whether two rules were meant to be nested, whether a repeated value was semantic or coincidental, whether a pattern should become a mixin. The tool applies sensible heuristics but the result is a starting point for refactoring, not a guaranteed reconstruction of the original SCSS source.
For ongoing projects use: Sass CLI — npm install -g sass then sass --watch src/styles.scss:dist/styles.css. Vite — install sass as a dev dependency, no config needed. Webpack — use sass-loader. Parcel — install @parcel/transformer-sass. This online tool is best for quick one-off conversions, prototyping, or learning how SCSS compiles.