jsonecho

SCSS Formatter

Format SCSS, including nested rules, mixins, maps and @use statements.

Loading the tool...

How to use SCSS Formatter

  1. Paste your code. The formatter engine loads in a moment the first time.
  2. Adjust the options if you need to.
  3. Copy the formatted result.

About SCSS Formatter

SCSS is CSS with nesting, variables, mixins and functions. The formatter indents nested rules, spaces maps and parameter lists, and handles @use, @mixin, @include and @if blocks.

It formats the source text. To get CSS out of it you still need Sass.

Frequently asked questions

Does it work on the indented Sass syntax?

No. This is for the SCSS syntax with braces and semicolons.

Are SCSS maps formatted?

Yes, one key per line when the map is long.

Does it convert SCSS to CSS?

No, that needs the Sass compiler.

Why did the first run take a second?

The formatting engine for this language is downloaded the first time you use it, then cached by your browser. After that, formatting is instant and nothing leaves your machine.

More in Code Formatters

All tools →