# SCSS Formatter

Format Sass SCSS stylesheets with this SCSS Formatter. Paste SCSS and the tool lays out nested rules, variables, mixins, includes, parent selectors and control directives with two space indentation, one declaration per line, a space after property colons and semicolons where they are missing. Interpolations and comments are kept, so front end developers can clean up partials and snippets without compiling them.

## Frequently asked questions

### How does the SCSS Formatter work?

It reads the stylesheet as tokens such as braces, semicolons, colons, strings and comments and rebuilds the layout from them. Every opening brace starts an indented block and every declaration ends on its own line.

### Is nesting supported?

Yes, nested rules and parent selectors such as &:hover are indented one level deeper than their parent, two spaces per level. Selector colons stay attached, so &:hover is not split.

### How are variables, mixins and includes formatted?

Variables such as $color: #333; get a space after the colon, and @mixin and @include keep their arguments with a space after each comma. Control directives such as @if, @each and @for get a space before their parenthesis.

### Are interpolations preserved?

Yes, interpolations such as #{$name} are copied exactly as written. That includes interpolations inside selectors, such as .icon-#{$name}, and inside property names.

### Does the tool compile or validate my SCSS?

No, it does not compile to CSS or check syntax, so it also formats incomplete snippets. Use the Sass compiler to find errors and produce CSS.

### Are comments kept?

Yes. Line comments starting with // end their line, and block comments are kept where they appear.

### Does it work with the indented Sass syntax?

No, it is built for SCSS, which uses braces and semicolons. Files in the indented .sass syntax have no braces to indent from, so convert them to SCSS first.

### Can I change the indentation?

No, the output always uses two spaces and the formatter has no options. The same stylesheet therefore always produces the same result.

### Why is the result fenced as scss?

The output is returned as a Markdown code block marked scss so it renders highlighted. Copy the lines between the fences for your .scss file.

### How large can my stylesheet be?

Up to 5 MB per run; larger input is rejected with a message. The output is identical to the SCSS option of the Code Formatter.

Your ad here?

[Email us](mailto:hi@dennn.is?subject=Advertising%20on%20OneClick%20Pro)

[Ad The agent-ready plugin suite for WordPress.](https://sleekwp.com/?ref=oneclickpro)