SCSS Minifier
FormattersMinify SCSS source directly — strips comments and collapses whitespace without compiling. Preserves SCSS syntax including variables and nesting. Browser-based.
About SCSS Minifier
The SCSS Minifier performs source-level minification on SCSS stylesheets — stripping all single-line (`//`) and block (`/* */`) comments, collapsing all whitespace sequences to a single space, and removing spaces around syntax characters (`{}`, `:`, `;`, `,`, `()`, `>`, `~`, `+`). Crucially, it does **not** compile SCSS to CSS first, so the output retains full SCSS syntax: `$variables`, nesting, `@mixin`, `@include`, `@use`, and all Sass-specific constructs. This makes it ideal for size-reducing SCSS source files before committing or distributing as part of a design system. Compression ratio and exact byte savings are shown after each run.
Features
- ✓Source-level minification — preserves SCSS syntax without compiling to CSS
- ✓Strips single-line comments (// comment) and block comments (/* comment */)
- ✓Collapses all consecutive whitespace (spaces, tabs, newlines) to a single space
- ✓Removes spaces around SCSS syntax characters: {, }, :, ;, ,, (, ), >, ~, +
- ✓Preserves $variables, @mixin, @include, @use, @forward, nesting, and all Sass syntax
- ✓Instantaneous — pure string transformation with no Web Worker needed
- ✓Displays compression ratio and exact byte savings after minification
- ✓Download minified output as a .scss file with one click
- ✓Language picker — instantly switch to Less, CSS, JavaScript, or other minifiers
- ✓One-click clipboard copy of minified output
- ✓Mobile-responsive layout with a dedicated Minify button
- ✓100% client-side — your stylesheets never leave the browser
Common Use Cases
- Reducing SCSS source file size before distributing as part of an npm design system package
- Stripping development comments from SCSS component libraries before publishing
- Compressing SCSS partials for embedding in documentation tools
- Reducing file size of SCSS snapshots committed to source control
- Comparing SCSS source size before and after adding styles
Frequently Asked Questions
QDoes this compile SCSS to CSS?
No — this tool minifies SCSS source code while preserving SCSS syntax. The output is still SCSS, not CSS. To compile and minify to CSS, use the SCSS Compiler to get CSS, then run it through the CSS Minifier.
QAre SCSS variables and mixins preserved?
Yes — the minifier only removes comments and whitespace. All SCSS-specific syntax ($variables, @mixin, @include, nesting, @use, @forward) is preserved in the output.
QIs my SCSS sent to a server?
No. All minification is pure string processing that runs locally in your browser. Nothing is transmitted to any server.