SCSS Formatter, Validator & Minifier

Beautify, check and minify SCSS (Sass) stylesheets

Paste SCSS with nested rules, variables, mixins, maps, loops and #{interpolation} and choose what you need. Format turns cramped or inconsistent Sass into clean, indented code with Prettier. Validate finds syntax errors like an unclosed block or a stray brace, with the line and column. Minify strips comments and whitespace while leaving strings, url() values and interpolation untouched, and every minified result is checked against the original before it's shown. Everything runs in your browser.

What can you do?

1. 1. Format SCSS
   Indent nested selectors, put one declaration per line, add consistent spacing after colons and in maps, and keep // and /* */ comments where you wrote them.
2. 2. Validate SCSS syntax
   Catch unclosed blocks, unexpected closing braces and malformed rules, reported as “Line 1, column 1: Unclosed block”, before your Sass build fails.
3. 3. Minify SCSS safely
   Remove // and /* */ comments and unnecessary whitespace. /*! licence comments are kept. Spaces that matter, such as in .a-#{$x} .b or calc(100% + 2px), are preserved.
4. 4. Built-in safety check
   Before showing a minified result, the tool re-formats both versions and confirms they're equivalent. If it can't prove that, it shows a message instead of risky output.
5. 5. Variable and mixin counts
   See how many $variables and @mixin definitions a file contains, handy when auditing a design system or theme.

Why format and validate SCSS?

SCSS nesting is powerful but quickly becomes hard to follow when indentation drifts. Three or four levels of & selectors, media queries and @include blocks with inconsistent spacing make it difficult to see which rule a declaration belongs to.

A formatter restores a clear structure that matches what the compiled CSS will look like, and a syntax check finds the missing brace that would otherwise surface as a confusing error from your build tool.

How to format or minify SCSS

1. 1. Paste your SCSS
   A partial such as _buttons.scss, a whole theme file or a single nested rule all work.
2. 2. Choose format, minify or validate
   Every action validates first, so the result is always based on SCSS that parses.
3. 3. Fix any reported problem
   Use the line and column in the message to find the error, then try again.
4. 4. Copy the result
   Copy the formatted or minified SCSS back into your project.

Example: SCSS formatted and minified

$primary:#06b6d4;
@mixin card($p:20px){padding:$p;border-radius:12px}
.card{@include card(24px);
// hover state
&:hover{color:darken($primary,10%)}.title-#{$size}{font-weight:600}}

$primary: #06b6d4;
@mixin card($p: 20px) {
  padding: $p;
  border-radius: 12px;
}
.card {
  @include card(24px);
  // hover state
  &:hover {
    color: darken($primary, 10%);
  }
  .title-#{$size} {
    font-weight: 600;
  }
}

$primary:#06b6d4;@mixin card($p:20px){padding:$p;border-radius:12px}.card{@include card(24px);&:hover{color:darken($primary,10%)}.title-#{$size}{font-weight:600}}

SCSS vs Sass vs CSS: which syntax do you have?

Almost any valid CSS is also valid SCSS, so you can paste plain CSS here too, but the CSS formatter adds checks for unknown properties and values that only make sense for plain CSS.

When should you minify SCSS?

Browsers never see SCSS. It's compiled to CSS, and Sass can already produce compressed output with style: compressed, which is what you should ship. Minifying the SCSS source is useful in other situations: embedding a theme in a single-line config field, shrinking a snippet for a CMS or a no-code tool that compiles SCSS for you, or sharing a compact reproduction of a bug.

If you need the compiled CSS minified instead, compile it with Sass and then use the CSS minifier and validator.

Frequently asked questions

Related tools

• CSS Formatter, Validator & Minifier – Beautify, validate and minify stylesheets.
• Less Formatter, Validator & Minifier – Beautify, validate and safely minify Less stylesheets.
• JSX Formatter & Validator – Format React components and catch JSX syntax errors.
• Vue Formatter & Validator – Format Vue single-file components and check every block.
• Diff Checker – Compare two versions of text or code line by line.