Search code examples
cssvimsassctags

How to make ctags + scss play nice


UPDATE: This question has been modified to reflect the very helpful comments and answer below. I've accepted the answer, but the full functionality is not working to-date.

Contents of .ctags (in ~/)

-R
--exclude=.git
--exclude=log 
--verbose=yes
--langdef=scss
--langmap=scss:.scss
--regex-scss=/^[ \t]*([^\t {][^{]{1,100})(\t| )*\{/| \1/d,definition/
--regex-scss=/^[@]mixin ([^ (]+).*/\1/m,mixing/

When I place my cursor under the target, vim says E426 tag not found: tag_name

Consider the following pattern:

footer{
 .wrapper{
  .general-info{
   .footer-links{
     a{@include ticker($bg, $white);}
    }
   }
  }
 }

In a separate file (modules.scss) in the directory, I have the definition for ticker:

@mixin ticker($color, $bg-color) {
 color: $color;
 background-color: $bg-color;
}

When I place my cursor under the target, vim still says E426 tag not found: tag_name

ctags does not index the ticker mixin. However I can use ctags to find methods from SCSS gem directly (e.g. darken).


Solution

  • adding a \ before the last { gives no warning when using ctags. I don't know if the tags produced give the desired result since I don't know the language.

    The result would be:

    --langdef=scss
    --langmap=scss:.scss
    --regex-scss=/^[ \t]*([^\t {][^{]{1,100})(\t| )*\{/| \1/d,definition/
    

    Update: like I mentioned above, I don't know the language, so it is hard to check the actual definition of the tags. I looked online and the following code is listed as scss in some webpage. Suppose the tags you want to get are the words following mixing.

    @mixin table-scaffolding {      
      th {                          
        text-align: center;         
        font-weight: bold;          
      }                             
      td, th { padding: 2px; }      
    }                               
    
    @mixin left($dist) {            
      float: left;                  
      margin-left: $dist;           
    }                               
    
    #data {                         
      @include left(10px);          
      @include table-scaffolding;   
    }                               
    

    then with the following:

    --langdef=scss
    --langmap=scss:.scss
    --regex-scss=/^[ \t]*([^\t {][^{]{1,100})(\t| )*\{/| \1/d,definition/
    --regex-scss=/^[@]mixin ([^ (]+).*/\1/m,mixin/
    --regex-scss=/^[@]function ([^ (]+).*/\1/f,function/
    

    you get the two new tags left and table-scaffolding. So if I am in the word left inside data hit ctrl+] it jumps to the line where data is defined. You have to be careful for the other keyword because it has a - in the word. So if you are on table and press ctrl+] you will get the same error tag not found. For this to work you have to add the following in your .vimrc

    set iskeyword+=-
    

    You should be able to generalize the above for other tags you need, or even build a general regular expression to handle all the tags, as you initially meant.

    If you post a specific example of how the file you are trying to work with looks like, and what are the tags you are trying to obtain I am sure I or other people would be able to help figure out a expression for that.