About the SCSS to SASS Converter
The indented syntax came first and is still preferred by people who like their stylesheets to look like the outline of the document they style. Converting to it removes roughly two characters per line and one line per block, so a large file gets noticeably shorter without any change in what it compiles to. Every declaration keeps its property and value, every nesting level is preserved, and the parent selector ampersand behaves the same way.
Two constructs pick up the compact spelling the indented syntax offers. A definition written @mixin panel($pad: 24px) is printed as =panel($pad: 24px), and @include panel(20px); becomes +panel(20px). Both long forms remain valid in a .sass file, so if you prefer them you can paste the output back and edit; the shorthand is used here because it is what the syntax is known for.
The one thing to be careful about is whitespace discipline. Indented Sass has no braces to fall back on, so a stray tab in a space indented file, or a line that is indented by an odd amount, changes which block a declaration belongs to. The output uses one consistent indent unit everywhere, and you should keep your editor set to insert the same unit before adding to it. Multi line values are the other trap: a long box-shadow list has to stay on one line. To go back the other way, SASS to SCSS restores the punctuation.
How to use
- Paste the SCSS you want to convert into the left pane.
- Set the indent width, then convert.
- Save the output as a .sass file rather than .scss, or the compiler will try to parse it with the wrong grammar.
- Configure your editor to insert the same indent unit before you edit the file further.
Common questions
- Will my comments survive the conversion?
- Yes. Two slash comments stay silent comments and block comments keep their /* */ wrapper, both placed on their own line in the output.
- What happens to a value that spans several lines?
- It is joined onto one line. The indented syntax treats a newline as the end of a declaration, so a wrapped gradient or shadow list has to be collapsed.
- Is the indented syntax deprecated?
- No. Dart Sass supports both dialects and there is no plan to drop either, so choosing between them is purely a matter of team preference.
- Can I use tabs instead of spaces?
- Yes, as long as you never mix them within a file. Choose Tab in the indent dropdown and keep your editor set the same way.