SCSS and LESS formatter — indent nested rules, mixins and variables

How to use the SCSS/LESS formatter

1. Choose the Syntax: SCSS (default), LESS or CSS.
2. Paste your code into the Input box. The sample is a BEM-style .nav block with a $brand variable.
3. Pick the Indent: 2 spaces, 4 spaces or Tab.
4. The Formatted result updates as you type; copy it back into your file.

What it does and when to use it

Preprocessor code nests deeply: a block, its &__element, a &:hover inside that, and a media mixin inside again. If indentation drifts, it becomes hard to tell which rule a declaration belongs to, and a misplaced brace changes the compiled selector. Formatting makes the nesting visible again. It also helps when you inherit a theme written on one line, or want a teammate’s partial to match the rest of the codebase before review.

For compiled output, use the CSS formatter to read it and the CSS minifier to shrink it. Other languages in the same project can go through the code beautifier.

How it works

The page loads Prettier’s standalone build with its PostCSS plugin and runs the parser named by Syntax (scss, less or css). The parsed tree is printed again with an 80-column width and your indent. Along the way Prettier:

• puts one declaration per line and adds a space after each colon,
• indents nested selectors, & rules and nested at-rules one level per depth,
• adds spaces after commas in function arguments, as in darken(@c, 10%),
• keeps // and /* */ comments.

Syntax errors stop the run and show a line and column. All of it happens in your browser.

Worked examples

These are the tool’s own outputs.

The SCSS sample. $brand:#34d399; and a one-line .nav block become nested levels:

.nav {
  display: flex;
  &__item {
    padding: 8px;
    &:hover {
      color: $brand;
    }
  }
  @include md {
    gap: 16px;
  }
}

LESS with a mixin call. With Syntax set to LESS, @c:#fff;.b{.mixin();color:@c;&:hover{color:darken(@c,10%)}} gives @c: #fff; followed by .b { with .mixin();, color: @c; and a nested &:hover block containing color: darken(@c, 10%);.

Sass modules. // theme, @use "sass:math"; and .grid{width:math.div(100%,3);@media (max-width:600px){width:100%}} keep the comment and module line, then print width: math.div(100%, 3); and an indented @media (max-width: 600px) block.

Wrong syntax chosen. .a{.mixin();} with Syntax set to CSS fails with “Unknown word .mixin (1:4)”. Switch to LESS and it formats.

Limits and tips

• Style is Prettier’s. Only the indent can be changed.
• Lower-casing applies here too: hex colours and property names come out lower case.
• LESS inline JavaScript is not safe. A backtick expression such as `"hello".toUpperCase()` comes back with spaces inserted inside it, which changes the code. Guards like when (@a > 10) format fine.
• The indented .sass syntax fails with an “Unknown word” error.