Sublime Text: Reindent SCSS files?

Question

I have some SCSS files that indents somehow manage to catch up.

I tried doing Edit > Line > Reindent and changing various indentation settings, but nobody was working properly.

Is there a consistent way to re-enter the SCSS file?

An example of what I see:

 [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 this happens over thousands of SCSS lines ... which I would rather not do and manually backtrack correctly.

Answer 1

Select all and press Ctrl - [ (Unindent) several times to remove all the original indents. Then use Edit -> Line -> Reindent and it should work well. 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); } }