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?

Improve this question

1 Answer 1

Reset to default
5

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

Improve this answer
4
  • 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, 2015 at 20:52
  • FWIW: :setlocal includeexpr -> includeexpr=rails#includeexpr(v:fname)
    – Meltemi
    Jul 22, 2015 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, 2015 at 21:07
  • FYI: while editing a .scss file :set suffixesadd -> suffixesadd=.sass,.scss,.css
    – Meltemi
    Jul 23, 2015 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.