SCSS Formatter

1. Paste your stylesheet, open a .scss or .less file with ⌘/Ctrl O, or load an example.
2. Set Syntax to SCSS or Less so variables, mixins and guards are parsed correctly; the output updates as you change settings.
3. Copy the result with ⌥/Alt C, download it with ⌘/Ctrl S, or choose Switch to CSS if the file is plain CSS.

#Nested SCSS rules

Minified SCSS with a variable, & selectors and an @include is expanded one declaration per line.

$accent:#4f46e5;.btn{padding:0 12px;border-radius:6px;&:hover{background:darken($accent,5%)}&--primary{background:$accent;color:#fff}@include focus-ring}

Result:

$accent: #4f46e5;
.btn {
  padding: 0 12px;
  border-radius: 6px;
  &:hover {
    background: darken($accent, 5%);
  }
  &--primary {
    background: $accent;
    color: #fff;
  }
  @include focus-ring;
}

#Maps, mixins and loops

Sass maps are broken one key per line, and @content and @each blocks are indented like any other rule.

$breakpoints:(sm:576px,md:768px,lg:992px);
@mixin up($bp){@media (min-width:map-get($breakpoints,$bp)){@content}}
.grid{display:grid;@include up(md){grid-template-columns:repeat(2,1fr)}
@each $name,$size in $breakpoints{.w-#{$name}{max-width:$size}}}

Result:

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px
);
@mixin up($bp) {
  @media (min-width: map-get($breakpoints,$bp)) {
    @content;
  }
}
.grid {
  display: grid;
  @include up(md) {
    grid-template-columns: repeat(2, 1fr);
  }
  @each $name, $size in $breakpoints {
    .w-#{$name} {
      max-width: $size;
    }
  }
}

#Less with a parametric mixin

With Syntax set to Less, @variables, mixin calls such as .mixin(); and Less functions are recognised.

@primary:#4f46e5;.mixin(@r:6px){border-radius:@r}.btn{.mixin();color:@primary;&:hover{color:darken(@primary,10%)}}

Result:

@primary: #4f46e5;
.mixin(@r:6px) {
  border-radius: @r;
}
.btn {
  .mixin();
  color: @primary;
  &:hover {
    color: darken(@primary, 10%);
  }
}

• Print width — the line length Prettier aims for before it breaks long selector lists, comma-separated values and maps across lines (80, 100 or 120).
• Tab width — spaces per nesting level (2 or 4); nested rules inside & blocks, mixins and media queries all use it.
• Single quotes — rewrites string values such as @use "sass:math", content and font names with single quotes instead of double.
• Syntax — chooses the SCSS or Less parser; pick the one that matches the file, because each treats @ and mixin calls differently.

#CssSyntaxError: Unknown word

The parser met something it cannot place, most often a Less mixin call like .mixin(); while Syntax is set to SCSS. Switch Syntax to Less. In SCSS files it usually means a stray character or a missing colon between property and value.

#CssSyntaxError: Missed semicolon

Two declarations run together, as in color:red background:blue. Add the semicolon at the reported column. This is also the error you see when you paste indented Sass syntax (.sass files without braces), which Prettier does not support; convert it to SCSS first.

#CssSyntaxError: Unclosed block

A { has no matching }. The reported position is the start of the rule that never closes, which is usually the outermost selector, so check the nested blocks inside it.

#CssSyntaxError: Unexpected }

There is an extra closing brace. The column points at the brace that has nothing to close; delete it or add the missing opening rule above.

#CssSyntaxError: Unclosed string

A quoted value such as content: "abc or a font name is missing its closing quote. The reported column is where the string starts.

#Can I format Sass indented syntax (.sass files)?

No. Prettier's stylesheet printer handles the brace-based SCSS syntax and Less, but not the indentation-based Sass syntax. Pasting indented Sass produces a "Missed semicolon" error. Convert the file to SCSS with the Sass compiler's own tooling first, or keep formatting it by hand. SCSS itself, including @use, @forward and module functions such as math.div, is fully supported.

#Does the formatter compile SCSS to CSS?

No. It only reformats the source; variables, mixins and functions are left exactly as written and nothing is evaluated. To see compiled CSS you still need the Sass or Less compiler. Once you have compiled output, the CSS Formatter tidies it and the CSS Minifier shrinks it for production.

#Is my stylesheet uploaded?

No. Prettier runs in your browser inside an isolated frame that blocks network requests, so nothing is uploaded or stored on a server. Your settings, including the chosen syntax, are remembered on this device. The stylesheet itself is kept only if you turn on "Remember my last input".

#Why are some parts left unspaced, like map-get($breakpoints,$bp)?

Prettier treats media query parameters and Less mixin definitions with default arguments more conservatively than ordinary declarations, so it keeps their inner spacing close to the original. Add the spaces yourself once; the formatter preserves them on later runs. Values in regular declarations are always normalised.

#Does it sort properties or remove duplicates?

No. Property order, duplicate declarations, vendor prefixes and comments are kept. The formatter changes whitespace, line breaks and quote style, plus a few safe normalisations: hex colours and property names are lowercased, and numbers such as .50em become 0.5em. Linting rules such as property ordering belong in a stylelint configuration.

#Should I choose SCSS or Less for a file that works in both?

Plain nested rules with & parse the same way in both. Choose by the file's variables: $name means SCSS, @name: value means Less. The Less parser tolerates SCSS variables, but the SCSS parser rejects Less mixin calls, so a wrong choice usually shows up as an "Unknown word" error.

For plain CSS, and the rest of the stylesheet and markup formatters, see the code tools or the HTML Formatter.