Skip to content

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.