Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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)
share|improve this question
    
If we leave the technical aspect of your question aside, this is not a very good idea. Selectors should be grouped by position on the page/in the site, cascading order, semantics… alphabetical sorting is probably worse than no order at all. –  romainl Apr 11 '13 at 6:41
    
Actually, the best way to architect css is by specificity, especially when you're working on large sites like I do. Check it out: youtube.com/watch?v=R-BX4N8egEc –  gmeben Apr 11 '13 at 12:05
    
Hmm, that's what I meant with "cascading oder". Alphabetical order sucks, anyway. –  romainl Apr 11 '13 at 12:08
    
Sorting properties and child selectors alphabetically is not a bad idea at all, as it cascades just fine and doesn't affect specificity. Please stay on topic. –  gmeben Apr 11 '13 at 12:12
    
It affects readability and comprehension which should be the primary concern when talking about sorting text/code. width: 23px; and height: 46px; are conceptually related and thus should stay together, same thing for margin and padding or position, top, bottom, left and right. –  romainl Apr 11 '13 at 13:02
show 2 more comments

1 Answer

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.

share|improve this answer
    
Cool, I'm gonna try this out soon –  gmeben Apr 11 '13 at 12:14
    
I get punked on Step 2. I selected the inline selectors and punched in my sort, but they're still in the same order. Are you saying I need to sort the properties? –  gmeben Apr 11 '13 at 13:40
    
at step 2 you should have only lines that start with selectors like .wrapper {...} or .big-yellow-button {...}. You should be able to sort all those lines by selecting them and do :sort without affecting what's between the curly brackets. –  romainl Apr 11 '13 at 15:13
    
Ooh, you meant that I have to v%J each inline block individually. I see. Now I'm getting a "Pattern not found" error on Step 3. –  gmeben Apr 11 '13 at 18:24
    
See the linked question for a more accurate pattern. –  romainl Apr 12 '13 at 5:00
show 8 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.