Skip to content

SCSS Formatter

Format SCSS/Sass stylesheets with Prettier, handling nesting, variables, mixins and maps.

Runs in your browserSCSS → SCSS
Loading tool…

Example

Input
$c:red;.a{color:$c;&:hover{color:blue}}
Output
$c: red;
.a {
  color: $c;
  &:hover {
    color: blue;
  }
}

How to use the SCSS Formatter

  1. Paste or type your SCSS into the input area, or open a file from your device.
  2. Adjust the options above the editor if the tool offers any.
  3. Review the SCSS result, then copy it or download it as a file.

Privacy and limitations

  • Your data is processed on your device and is not uploaded to any server.

Related converters

CSS BeautifierBeautify minified or messy CSS into readable, consistently indented rules with one declaration per line.Less FormatterFormat Less stylesheets with Prettier, keeping variables, mixins and nested rules readable.HTML BeautifierBeautify HTML with Prettier: consistent indentation plus formatting of embedded CSS and JavaScript.TypeScript FormatterFormat TypeScript and TSX with Prettier, including interfaces, generics, enums and decorators.Markdown FormatterNormalise Markdown with Prettier: consistent list markers, headings, emphasis and table alignment.JavaScript BeautifierFormat and beautify JavaScript (including JSX and modern syntax) with Prettier: indentation, quotes and semicolons.GraphQL FormatterFormat GraphQL queries, mutations, fragments and schema definitions (SDL) with Prettier.Java FormatterFormat Java source code with Prettier and prettier-plugin-java: classes, records, lambdas, generics and long call chains.

Browse all beautifiers & formatters →