SCSS Formatter & Beautifier

Example

Before

@use "sass:math";$breakpoints:(sm:640px,md:768px,lg:1024px);@mixin up($bp){@media (min-width:map-get($breakpoints,$bp)){@content}}
%card-base{border-radius:8px;padding:math.div(24px,2)}.card{@extend %card-base;&__title{font-weight:600;@include up(md){font-size:1.25rem}}&--featured{border:2px solid $brand}}

After

@use "sass:math";
$breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px
);
@mixin up($bp) {
  @media (min-width: map-get($breakpoints,$bp)) {
    @content;
  }
}
%card-base {
  border-radius: 8px;
  padding: math.div(24px, 2);
}
.card {
  @extend %card-base;
  &__title {
    font-weight: 600;
    @include up(md) {
      font-size: 1.25rem;
    }
  }
  &--featured {
    border: 2px solid $brand;
  }
}

SCSS syntax the formatter understands

Nesting with &, including BEM suffixes like &__title and &--featured.
@use and @forward with namespaces (math.div), and the older @import.
@mixin and @include with arguments and @content blocks, @function and @return.
Control flow: @if / @else, @each over maps and lists, @for and @while.
Placeholder selectors (%card-base) with @extend, and interpolation like #{$prop}-top.

Format SCSS in your project

Shell

npm install --save-dev prettier
npx prettier --write "src/**/*.scss"

Writing plain CSS or Less? The CSS formatter and Less formatter use the same engine. Converting colors for your variables? Try the color converter.

Frequently asked questions

Is the indented Sass syntax (.sass) supported?

No. This formatter handles SCSS, the brace-and-semicolon syntax in .scss files, which is what almost every project uses today. The older indented syntax in .sass files has no braces or semicolons, and Prettier can’t parse it. The sass-convert tool from Dart Sass can turn .sass files into .scss.

Does it compile SCSS to CSS?

No, it only reformats the SCSS source; variables, mixins and nesting stay as they are. To get CSS, compile with Dart Sass (npx sass input.scss output.css). The CSS can then be tidied with the CSS formatter or shrunk with the CSS minifier.

How are Sass maps formatted?

A map that fits within the line width stays on one line. A longer one is broken into one key: value pair per line, with the closing parenthesis on its own line, which keeps diffs small when you add a breakpoint or a color.

Why did my comment move?

It shouldn’t: both // line comments and /* block */ comments are kept where they are relative to the code around them. If a comment ended up in an odd place, it was usually on the same line as a closing brace in the original; put it on its own line before formatting.