3

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?

4

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:

scss

  • Can you expand on your gf section (i'll get to others later). I'm typing gf over "avatar" and…nothing. Can you tell he how to check if my "defaults" are configured as you mention? – Meltemi Jul 22 '15 at 20:52
  • FWIW: :setlocal includeexpr -> includeexpr=rails#includeexpr(v:fname) – Meltemi Jul 22 '15 at 20:56
  • That includeexpr is wrong, rails.vim has no business defining that for non-ruby/rails files and I suspect suffixesadd is wrong too. Also, see my edit. – romainl Jul 22 '15 at 21:07
  • FYI: while editing a .scss file :set suffixesadd -> suffixesadd=.sass,.scss,.css – Meltemi Jul 23 '15 at 0:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.