Vim: How would I recursively run “:sort” for everything between curly braces?


Tags: css,vim

Problem :

I'm a web developer and I often have to write CSS:

I always sort the styling alphabetically so this:

.sorted_product_mens_color_list li, .sorted_product_womens_color_list li {
    margin: 0 5px 0 5px;
    padding: 5px;
    border: 2px solid black;
}

turns into:

.sorted_product_mens_color_list li, .sorted_product_womens_color_list li {
    border: 2px solid black;
    margin: 0 5px 0 5px;
    padding: 5px;
}

However, this gets repetitive and I want to just automate it by writing a script that does this in VIM.

How would I either 1) run :sort in a loop within a file within all curly braces or 2) Run that in all CSS files in a directory? (either one)



Solution :

For a single file you could do :

:g/{/normal! f{viB:sort^M

What this does :

  • :g/{/ : for every line containing a {
  • normal! : enter normal mode (the ! simply skips mappings in the command)
  • f{ : find the (first, but this shouldn't be a problem in css (?)) {
  • viB : enter visual mode between the curly brackets
  • :sort : well... sort the visual selection
  • ^M : press enter (this is a single character, use <C-v><CR> to type it)

For multiple files you could do :

# From you shell
# In zsh you would use 'vim **/*.css' to open all the css files in nested directories
# Not sure about your shell
$> vim *.css     # open css files in the current directory
" In vim
:argdo g/{/normal! f{viB:sort^M:update^M

The :update is the same as :write, except that it will not trigger a write if the buffer wasn't modified.


    CSS Howto..

    How to hide CSS background images that use !important

    How to limit a table cell to one line of text using CSS?

    How to style form use css [closed]

    How can I align a logo AND a heading to the centre of a page?

    How to set column width for DataTables

    How do I give a WordPress Custom Menu item an id or class for CSS targeting?

    How to apply gradient to element with correctly display in IE9?

    how to show ng-repeat horizontal?

    How to set Bootstrap @font-family-base?

    How to correctly use text overflow in bootstrap

    Javascript/CSS, How to keep changes?

    How to use scss with css modules / postcss inside components

    how to add an overlaying color over an image with css

    How to use jquery function on numbers separated by .(dot) or ,(comma) as thousands separator

    how to change :nth element background size

    How to change text colour on a child structure HTML5

    How to get background img to show up in :after selector?

    How do I learn what changes my css values?

    How can I prevent a bookmark from changing style when moving the cursor over it?

    How to force font-weight on all children, but respect the nested depth

    How to create shapes in css? [closed]

    Using jqTransform on hidden contact form, select box value not showing

    how to put inline image css in ghost-blog?

    How to do the Height of html tag Body on 100% of browser window size?

    How do I remove the gap between div tags?

    How to manipulate SVG element style with javascript?

    How do you make a menu scroll with the page, but leave the logo

    How To Get Color of WebElement From Complicated css case using Webdriver?

    How to set a max-width only to text nodes not in a tag?

    How do I center all my elements?