Vim - Ordenar blocos aninhados de SCSS

Question

Nota:

Alguém com 300 de reputação pode adicionar a tag "scss" a esta pergunta? Eu ficaria muito agradecido.

Meu código (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;
    }
}

O que eu preciso para parecer:

.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;
    }
}

A solução deve:

• Classifique alfabeticamente o
  • propriedades do bloco pai
  • propriedades dos blocos filhos
  • blocos filho
• Preservar recuo
• Bônus: Corrigir inconsistência no espaço em branco (por exemplo, espaços entre nomes e valores de propriedade)

Answer 1

Não existe uma maneira fácil / integrada de fazer o que você deseja. Você obviamente usará o comando :sort de uma vez ou outra, mas precisará criar algumas macros. Basicamente, a ideia é:

1. coloque todas as suas regras em linha

   v%
   J
   (repeat)
   

2. ordene seus seletores

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

3. expanda seus blocos de regras e faça com que pareça bom

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

4. classifica cada bloco

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

Você pode encontrar alguma inspiração lá .