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 inherit Image width and height to video tag

    How To Adjust CSS List On Hover Image

    How to load Angular.js form to jsFiddle?

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    how to make divs adjust to dynamic screen resolutions?

    how to get css highlighting and hinting for php files in dreamweaver that are being read as css files?

    The UI Designers and Marketing people at my company don't want “awkward line breaks”. How to do with CSS or JS? [closed]

    How to set two directions for flex-box css?

    CSS how to have two divs to the right of one div but not beside each other

    CSS - how to put divs in the correct position on a webpage [closed]

    Flex: How to embed fonts with CSS

    how to properly resize navbar fixed in bootstrap

    How to apply ckeditor css to output

    How to make CSS border show on radio button click

    How do I eloquently toggle a show/hide event in a list of multiple collapsible items with jQuery?

    Show div on button click with multiple divs

    How to correctly align left in CSS?

    How to use Grunt while continually compressing css / javascript

    How to select all elements that are not of a class within an id css

    How to check the CSS hyphens in effect using Chrome developer tools?

    How to define a CSS fontface?

    How do I access separate points/sections on a single image in html/javascript?

    How to add css box-shadow using .style javascript property

    How To select a specific Div from its Class with JS

    Showing refresh button when animation is complete?

    CSS: show triangles in a row

    How to give the color to * without using span Tag

    How to create a horizontal navigation in HTML/CSS above an image?

    jquery: how to determine if a style is set via css class or hardcoded by style attribute? [duplicate]

    How do you make a make a page's worth of empty space (with only a title) followed by a div in CSS?