SCSS Formatter

An SCSS formatter for Sass projects

This SCSS formatter formats the brace-based Sass syntax (.scss files) with Prettier's SCSS parser. It tidies layout while leaving every Sass feature as you wrote it, so you can use it on source files before committing. If you want the CSS that Sass produces, use the SCSS Compiler instead.

Example

@use 'sass:math';$breakpoints:(sm:576px,md:768px,lg:992px);@mixin up($bp){@media(min-width:map-get($breakpoints,$bp)){@content}}.grid{display:grid;gap:math.div(24px,2);@include up(md){grid-template-columns:1fr 1fr}&__item{@extend %card}}

@use "sass:math";
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px
);
@mixin up($bp) {
  @media (min-width: map-get($breakpoints,$bp)) {
    @content;
  }
}
.grid {
  display: grid;
  gap: math.div(24px, 2);
  @include up(md) {
    grid-template-columns: 1fr 1fr;
  }
  &__item {
    @extend %card;
  }
}

The Sass map is expanded to one key per line, which makes breakpoints and theme tokens easy to scan and diff. @content gets its semicolon, module functions like math.div() get a space after the comma, and the BEM element &__item stays nested under its block. Values inside the media query's parentheses are printed as written.

SCSS features supported

• Modules: @use with as and with ( ... ), @forward, namespaced members like math.div and color.adjust.
• Mixins and functions: @mixin, @include with arguments and content blocks, @function with @return.
• Control flow: @if / @else, @each over lists and maps, @for, @while.
• Placeholders (%card) and @extend.
• Interpolation in selectors, properties and media queries: .icon-#{$name}.
• Flags: !default and !global on variables.

How nesting and & read after formatting

Formatting makes the parent selector & much easier to follow, because each nested block sits under its parent. As a reminder of what each form compiles to:

.button {
  &:hover { ... }        // .button:hover
  &--primary { ... }     // .button--primary
  .icon { ... }          // .button .icon
  > .label { ... }       // .button > .label
  .theme-dark & { ... }  // .theme-dark .button
}

The // comments are valid in SCSS and are removed during compilation. The formatter keeps them in place next to the rule they describe.

SCSS or Sass?

Sass has two syntaxes. SCSS uses braces and semicolons and is a superset of CSS, so any CSS file is valid SCSS. The older indented syntax (.sass files) uses indentation and no semicolons. This formatter handles SCSS only. To switch between them, convert with SASS to SCSS; note that conversion goes through CSS, so variables and mixins are resolved in the process.

Options and conventions

Indent defaults to 2 spaces, used by Bootstrap, the Sass documentation and most style guides. Line width wraps long selector lists and value lists. Beyond formatting, widely followed SCSS conventions include:

• Prefer @use over @import; the Dart Sass team has deprecated @import.
• Use math.div($a, $b) rather than / for division, which is also deprecated in Dart Sass.
• Order inside a rule: @extend, @include, declarations, then nested rules and media queries.
• Limit nesting depth so compiled selectors stay short.

Common errors

• "Unknown word" after a line without a semicolon: SCSS requires semicolons between declarations, unlike the indented syntax.
• Unclosed block – a missing }, often after an @include ... { content block.
• Undefined variables are not reported: formatting does not evaluate Sass. Compile the file to find those.
• Rule order is not checked either. Sass requires @use to appear before any other rules except @forward and variable declarations; the compiler reports a violation, the formatter does not.

Everything runs in your browser; your stylesheets are not uploaded.