How to make Vim a first class CSS editor
I have always struggled with CSS in vim. Seems like it would be easy to implement compared to auto-complete in other filetypes.
All I really wanted to have was some sort of reminder on what was valid properties and where to put the positional arguments when I am using the shorthand properties.
Today I discovered the two things I needed to fix this. SnipMate and Omnicomplete
SnipMate
I forked the basic SnipMate and added some simple snippets for CSS. If you want to use it, then you can install from my GitHub repo directly
git clone git://github.com/csexton/snipmate.vim.git
cd snipmate.vim
cp -R * ~/.vim
Or you can just grab the css.snippets file and add it to your .vim/snippets directly.
Omnicomplete
This is built in to Vim 7, I just didn’t realize it worked for CSS. a simple crtl-x ctrl-o and it should attempt to complete your word for you. Cool thing is that if you use it after a property before you even start to type you can invoke it to get a list of properties.
If this does not work, should make sure that the omnifunc it set to use the CSS completer:
:set omnifunc=csscomplete#CompleteCSS
Making the CSS Dance
Now that you have both of those installed you can do cool stuff like complete your property values
After typing “border-style: “ I pressed type ctrl-x ctrl-o and get a handy popup complete list.
This was generated by typing “margin:<tab>”. No longer have to go look up which order the parameters go in.
Sassy Update
To get this trickery to work with scss files, add the following to your vimrc:
autocmd BufNewFile,BufRead *.scss set ft=scss.css