Sublime Text: Reindent SCSS files?

Question

I've got some SCSS files who's indentation has somehow managed to get pretty jacked up.

I've tried doing Edit > Line > Reindent and changing various indentation settings, but none seem to work properly.

Is there a consistent way to re-indent a SCSS file?

Example of what I'm seeing:

[role="main"] {
 margin: 0 auto;
 padding: 30px;
 h1 {
  text-align: center;
  font-family: 'Exo';
  font-weight: 200;
  font-size: 3.5em;
  margin: 8px 0 20px 0;
}
}
.hidden {
  display: none;
}
.button, button {
 @include button;
 &.red {
  @include button($red);
}
}

And that's happening across thousands of lines of SCSS...which I'd rather not have to go and manually correctly indent.

Answer 1

Select everything, and hit Ctrl-[ (Unindent) several times to remove all of the original indentation. Then, use Edit -> Line -> Reindent and it should work nicely. Your sample code produced this for me:

[role="main"] {
    margin: 0 auto;
    padding: 30px;
    h1 {
        text-align: center;
        font-family: 'Exo';
        font-weight: 200;
        font-size: 3.5em;
        margin: 8px 0 20px 0;
    }
}
.hidden {
    display: none;
}
.button, button {
    @include button;
    &.red {
        @include button($red);
    }
}