Formatters

SCSS Beautify / Minify

Format SCSS with proper indentation for nested rules, consistent spacing around mixins and variables, and clean @use/@forward declarations. Handles the full SCSS syntax including control directives (@if, @each, @for), placeholder selectors, and function definitions.

SCSS Beautify / Minify — Beautify or minify SCSS stylesheets

What it does

  • ▸Beautifies SCSS with configurable indent, properly indenting nested rules
  • ▸Handles @mixin, @include, @extend, @use, @forward, and @at-root
  • ▸Formats control flow directives (@if, @each, @for, @while)
  • ▸Preserves variables ($var), placeholder selectors (%placeholder), and functions
  • ▸Minify mode for production output

Use cases

  • ▸Formatting SCSS from a design system or component library
  • ▸Cleaning up SCSS generated by a migration tool
  • ▸Standardizing SCSS style across a team
  • ▸Making a complex nested SCSS file readable before refactoring

How it works

1

Paste your SCSS into the input pane

2

Choose beautify or minify mode

3

Set indent style if beautifying

4

Copy the formatted SCSS from the output pane

Frequently asked questions

1Does it compile SCSS to CSS?

No. This is a formatter, not a compiler. It beautifies the SCSS syntax without converting it to CSS. Use your build tool (Dart Sass, webpack, Vite) for compilation.

2Does it handle Sass indented syntax (.sass)?

This formatter handles SCSS (the brace-based syntax). The indented Sass syntax has different formatting rules and isn't supported here.

3Will it sort my @use declarations?

The formatter preserves the order of @use and @forward statements since that can affect the cascade. It only adjusts whitespace and indentation.

Related tools

CSS Beautify / Minify — Beautify or minify CSS stylesheets

CSS Beautify / Minify

Beautify or minify CSS stylesheets

LESS Beautify / Minify — Beautify or minify LESS stylesheets

LESS Beautify / Minify

Beautify or minify LESS stylesheets

ERB Beautify / Minify — Beautify or minify ERB templates for Ruby on Rails

ERB Beautify / Minify

Beautify or minify ERB templates for Ruby on Rails

SVG Optimizer — Optimize SVG files with SVGO — strip metadata, minify paths

SVG Optimizer

Optimize SVG files with SVGO — strip metadata, minify paths

Use SCSS Beautify / Minify offline in Devinity

All 95 tools run locally on your Mac. No internet required, no data sent to servers.

Download Devinity →