Vim - Sort Nested Blocks of SCSS

Question

Note:

Can someone with 300 reputation please add the tag, "scss" to this question? I'd be very appreciative.

---

My code (scss):

.cinderblock {
    @include minwidth();
    background-image:url("images/cinderblock.jpg");
    background-position:top center;
    background-color:#b79966;
    height:528px;

    .wrapper {
        background-image:url("images/home-decorito.jpg");
        height:488px;
    }
    .big-yellow-button {
        width: auto;
        position:absolute;
        bottom:84px;
    }
}

What I need it to look like:

.cinderblock {
    @include minwidth();
    background-color:#b79966;
    background-image:url("images/cinderblock.jpg");
    background-position:top center;
    height:528px;

    .big-yellow-button {
        bottom:84px;
        position:absolute;
        width: auto;
    }
    .wrapper {
        background-image:url("images/home-decorito.jpg");
        height:488px;
    }
}

The solution must:

• Alphabetically sort the
  • properties of the parent block
  • properties of the child blocks
  • child blocks
• Preserve indentation
• Bonus: Correct inconsistency in whitespace (e.g. spaces between property names and values)

Answer 1

There's no easy/builtin way to do what you want. You'll obviously use the :sort command at one time or another but you'll need to come up with a couple of macros. Basically, the idea is to:

1. put all your rules inline

   v%
   J
   (repeat)
   

2. sort your selectors

   (select the inlined selectors)
   :'<,'>sort
   

3. expand your blocks of rules and make it look good

   :s/\[{;\]/&\r
   =%
   

4. sort each block

   (select the rules)
   :'<,'>sort
   

You can find some inspiration there.