Format or minify SCSS stylesheets while preserving variables, mixins, directives, and nesting without compiling.
Loading tool
About SCSS Beautify / Minify
Format or minify SCSS without compiling it. Variables, maps, mixins, placeholder selectors, @include/@extend/@each directives and nesting are kept as written; beautify re-indents with 2, 4 or 8 spaces or tabs, while minify strips // and /* */ comments (keeping /*! license */ blocks) and collapses whitespace, preserving strings, #{} interpolation, url() values and math expressions. A brace check warns about unbalanced braces.
Common uses
- Re-indent an SCSS partial with collapsed one-line rules.
- Make nested BEM-style SCSS readable during a code review.
- Find an unclosed brace or parenthesis in a large stylesheet.
- Compact an SCSS snippet for sharing.
FAQ
- Does this compile SCSS to CSS?
- No. It formats the SCSS source only; mixins, variables and functions stay as they are. Use Dart Sass or your build tool to compile to CSS.
- Does it support the indented .sass syntax?
- No. It is meant for SCSS, the brace-and-semicolon syntax. The older indented Sass syntax relies on indentation for structure and is not handled.