Skip to main content

​
SCSS Beautify/Minify

Format or minify SCSS (Sass) stylesheets. Beautify adds indentation for nested rules; minify removes comments and whitespace.

​
Overview

The SCSS Beautify/Minify tool processes SCSS as CSS:
  • Beautify — Indents rules, properties, and nested selectors with 2 spaces
  • Minify — Removes comments, collapses whitespace, and strips unnecessary characters
Supports SCSS syntax including nested rules, variables, mixins, and @import/@use.

​
Use Cases

Sass cleanup

Format SCSS files for readability and team consistency

Build optimization

Minify SCSS before compilation to reduce intermediate file size

Migration

Reformat legacy Sass files with consistent indentation

Debugging

Beautify minified SCSS from third-party libraries

​
Actions

Indents rules, properties, and nested selectors with 2 spaces per level.Input:
.header{$bg:#333;background:$bg;.nav{display:flex;}}
Output:
.header {
  $bg: #333;
  background: $bg;
  .nav {
    display: flex;
  }
}

​
Implementation Details

The SCSS beautifier uses the same CSS beautification algorithm as the CSS Beautify tool. SCSS-specific syntax (variables $var, mixins @mixin, nesting, @extend) is treated as CSS syntax. Source: lib/tools/engine.ts:525-528
Key logic
case 'less-beautify':
case 'scss-beautify': {
  return { output: action === 'minify' ? minifyCss(input) : beautifyCss(input) };
}
The beautifier does not parse SCSS semantics (variable scope, mixin expansion, @extend resolution). It formats based on CSS structure only.

​
SCSS Feature Support

$primary: #007bff;
color: $primary;
Variables are preserved and formatted as CSS properties.
.header {
  .nav {
    display: flex;
  }
}
Nested rules are indented with 2 spaces per level.
@mixin rounded($radius: 5px) {
  border-radius: $radius;
}
.button {
  @include rounded(10px);
}
Mixins are formatted as rulesets. @include calls are treated as properties.
.button {
  &:hover {
    opacity: 0.8;
  }
}
Parent selector (&) is preserved and formatted correctly.
For SCSS-aware formatting with semantic validation, use the Dart Sass compiler or a dedicated SCSS formatter like Prettier.

​
Keyboard Shortcuts

  • Cmd/Ctrl+Enter — Beautify (default)
  • Cmd/Ctrl+Shift+C — Copy output
  • Cmd/Ctrl+Shift+S — Download output

LESS Beautify/Minify

Format or minify LESS stylesheets

CSS Beautify/Minify

Format or minify vanilla CSS (same algorithm)

HTML Beautify/Minify

Format or minify HTML markup

Build docs developers (and LLMs) love

Get started for freeTalk to us