How to browse SASS/CSS files with VIM effectively?

Question

Smartest minds in this sector of internet! Please advise me how to effectively browse codebase in SASS with VIM. Tagbar not showing SASS tree, neither I can fold style declarations hierarchically. So, the question is - how to use tagbar and/or folding with SASS/SCSS/CSS files? Maybe you can suggest me other way of effectively browsing SASS? Thank you!

Answer 1

Folding

With set foldenable and set foldmethod=indent in your ~/.vimrc, you are able to fold away all the definitions with zM and go back to normal with zR. Use zj and zk to jump from fold to fold. See this answer for a very cool tip that I'm going to use right now and :help fold for more info about folding.

Tags

See this q/a for a limited ctags-based solution. And this Gist for an approach using TagBar. That's what you need to try first if you want a hierarchical tree with your classes, ids and tagnames.

Cscope

You won't get a hierarchical tree or an outline with it but cscope is a great code indexer that may be useful for jumping directly to a known selector. Do $ cscope -R *.scss and search for classes, ids and tagnames. Hit <CR> on a match to open your $EDITOR at the correct line.

---

I personnaly use the "limited ctags-based solution" above with CtrlP's :CtrlPBufTag and :CtrlpTag with great success. But I only do basic CSS.