What gets stripped during SCSS minification?

Variables are substituted, nesting is flattened, mixins are inlined, @media queries are bubbled to top level, all comments (// and /* */) are removed, and unnecessary whitespace is collapsed. The result is functionally identical to the source.

Should I minify SCSS in development?

No. Use the SCSS Formatter for development, the SCSS Minifier only in production builds. Most build tools (Vite, Webpack) minify SCSS automatically during production builds.

Home/Dev Tools/SCSS Minifier

SCSS Minifier

Minify

Minify SCSS for production. Strip whitespace and comments from SCSS files.

Input

Loading editor…

Output

Loading editor…

✨ AI Code Explanation

Mode

What Is SCSS Minification?

SCSS minification compiles your SCSS source to CSS and strips all whitespace and comments — producing the smallest possible CSS file ready for production. Browsers can't read SCSS directly, so SCSS must be compiled to CSS before deployment. Minifying during compilation is the standard production workflow.

SCSS Minifier Online — What This Tool Does

This free SCSS minifier compiles .scss files to compressed CSS entirely in your browser using the Dart Sass compiler. Variables are substituted, nesting is expanded, mixins are inlined, and all whitespace is removed. Output is production-ready minified CSS that browsers can render directly.

How to Minify SCSS Online

Paste SCSS into the Input pane, or click Upload to load a .scss file.
Click Minify — Dart Sass compiles and compresses your SCSS in one step.
The size badge shows Original (SCSS) and Minified (CSS) byte counts plus percentage saved.
Click Copy or Download to save as minified.css.

What Gets Compiled and Stripped?

Variables ($primary) — substituted with their values.
Nesting — flattened to descendant selectors.
Mixins (@include) — inlined at each call site.
Functions (@function) — evaluated and removed.
Comments — both // single-line and /* */ block comments stripped.
Whitespace — all unnecessary whitespace collapsed.
@media queries — bubbled to top level, then minified.

How Much Can SCSS Minification Save?

Typical SCSS files see 30–50% size reduction from compilation plus minification — SCSS source is generally more verbose than equivalent CSS thanks to nesting and variable declarations. Combined with gzip / Brotli server compression, total transfer savings often exceed 80%.

Tips & Tricks

Never deploy unminified CSS — even small stylesheets benefit from minification on the critical render path.
Combine with CDN gzip / Brotli — multiplicative savings.
Format SCSS first with our SCSS Formatter for readable source, then minify for production.
Source maps for debugging — production builds typically include source maps so DevTools can show original SCSS. This tool doesn't generate them; use a build pipeline (Vite, Webpack) for that.
Watch for legacy comment hacks — minifiers strip comments aggressively. If your CSS depends on comment-based browser hacks, audit the output.

Related Tools

SCSS Formatter — beautify SCSS for development.
SCSS to CSS — compile without minification (formatted output).
CSS Minifier — minify already-compiled plain CSS.
Less Minifier — minify Less stylesheets.
CSS Formatter — beautify minified CSS for debugging.

Is My Code Sent to a Server?

No. SCSS compilation and minification run entirely in your browser via WebAssembly Dart Sass plus a JS post-processing step. Your stylesheet — including proprietary design tokens and brand colours — never leaves your machine.