Jump to the definition in a scss file

Question

How, in vim, can I jump to the mixin that is @includeed in a SCSS file?

For example, I'd like to put the cursor over avatar below and hit some magic key in vim that'll take me to that mixin...but how?

#app/assets/stylesheets/application/_global.scss

...
.avatar {
  @include avatar(50px);
  float: left;
  margin-right: 0.5em;
}
...

ctags doesn't pick it up.

And typing gf yields error: Can't find file "avatar.rb" in path. Which makes me wonder if I might be able to add .scss as a suffix that gf will consider because the file I want to jump to is avatar.scss?!?

I've tried :set suffixesadd+=.scss to no effect. thoughts?

Answer 1

gf

The default $VIMRUNTIME/ftplugin/scss.vim sources $VIMRUNTIME/ftplugin/sass.vim which already sets everything for you to do gf over avatar and jump to avatar.css:

setlocal suffixesadd=.sass,.scss,.css
setlocal includeexpr=substitute(v:fname,'\\%(.*/\\\|^\\)\\zs','_','')

See:

:help gf
:help 'includeexpr'
:help 'suffixesadd'

definition search

It is also supposed to set everything for doing [<C-d> over avatar and jump to the definition of the mixin but there seems to be a problem with the default includeexpr that prevents the otherwise correctly recognized includes to be correctly processed. Resetting that option fixes the issue:

setlocal includeexpr=

Adding the line above to ~/.vim/after/ftplugin/scss.vim should do the trick.

The relevant lines in $VIMRUNTIME/ftplugin/sass.vim are:

setlocal define=^\\s*\\%(@mixin\\\|=\\)
setlocal includeexpr=substitute(v:fname,'\\%(.*/\\\|^\\)\\zs','_','')
setlocal suffixesadd=.sass,.scss,.css
let &l:include = '^\s*@import\s\+\%(url(\)\=["'']\='

See:

:help 'define'
:help 'includeexpr'
:help 'suffixesadd'
:help 'include'
:help :let-&
:help definition-search

ctags

If you use ctags, adding the lines below to ~/.ctags will give you a reasonably good sass support:

--langdef=scss
--langmap=scss:.scss
--regex-scss=/^[ \t]*@mixin ([A-Za-z0-9_-]+)/\1/m,mixin,mixins/
--regex-scss=/^[ \t]*\$([A-Za-z0-9_-]+)/\1/v,variable,variables/
--regex-scss=/^([A-Za-z0-9_-]*)*(\.[A-Za-z0-9_-]+) *[,{]/\2/c,class,classes/
--regex-scss=/^[ \t]+(\.[A-Za-z0-9_-]+) *[,{]/\1/c,class,classes/
--regex-scss=/^(.*)*\#([A-Za-z0-9_-]+) *[,{]/\2/i,id,ids/
--regex-scss=/^[ \t]*#([A-Za-z0-9_-]+)/\1/i,id,ids/
--regex-scss=/(^([A-Za-z0-9_-])*([A-Za-z0-9_-]+)) *[,|\{]/\1/t,tag,tags/
--regex-scss=/(^([^\/\/])*)[ \t]+([A-Za-z0-9_-]+)) *[,|\{]/\3/t,tag,tags/
--regex-scss=/(^(.*, *)([A-Za-z0-9_-]+)) *[,|\{]/\3/t,tag,tags/
--regex-scss=/(^[ \t]+([A-Za-z0-9_-]+)) *[,|\{]/\1/t,tag,tags/
--regex-scss=/^[ \t]*@media\s+([A-Za-z0-9_-]+)/\1/d,media,media/

See:

:help tags
:help ctags
$ man ctags

Here is a demo of the three methods above, in the same order: