SCSS support

[bjeanes]

e.g.:

header {
  background: #9f7d5d url(/images/header.jpg) repeat-x top center;
  height: 100px;
  margin-bottom: 1px;
  a {
    h1 {
      background-color: #58412e;
      background-color: rgba(0, 0, 0, 0.2);
      border-top: 1px solid #5D4430;
      border-bottom: 1px solid #9c7962;
    }
    &:hover h1 {
      background-position: center bottom;
    }
}

[keithpitt]

Plus 1. That feature would change my world.

[gshankar]

++

That feature would rock my socks

[bjeanes]

I just saw that #1 is for the same issue but was closed with a workaround not a fix. Running set ft=css DOES make the highlighting work, however it makes other SCSS-specific things not highlight correctly. I even tried set ft=css.scss but unfortunately this did not change much.

[bjeanes]

I just experimented with a few different ways of getting the highlighting working in SCSS/Sass, including au! FileType scss runtime! after/syntax/css.vim and manually sourcing the file from within a SCSS file. All of these routes resulted in the SCSS syntax screwing up a little bit.

Here's two screenshots for comparison:

Before:

After:

[airblade]

I asked about this in the vim-haml repo and Tim Pope found the solution.

Please could you update your syntax file to add @cssColors to the sassCssAttributes cluster?

Thanks in advance.

[bjeanes]

@airblade, I tried putting this in after/syntax/css.vim as tpope suggested but it didn't do the trick for me. Perhaps this is something tpope can do in tpope/vim-haml? I've asked about it here

Otherwise, the following in my .vimrc did work:

au! FileType scss syntax cluster sassCssAttributes add=@cssColors

[airblade]

This one-liner solves the problem:

Create a new file: vim-css-color/after/syntax/sass.vim. In that file put this line:

syn cluster sassCssAttributes add=@cssColors

Done.

It would probably be a good idea to add the usual Vim boilerplate, conditional loading, etc. But for now this does the job.

[wikimatze]

@airblade
works like a charm, thanks for the hack, great job done.

[gf3]

Unfortunate this solution doesn't highlight colours in variables. E.g.: $heading-colour: #4D4D4D.

[aaronjensen]

For some reason I have the opposite issue. Variables work fine by attributes do not. I'm also using syn cluster sassCssAttributes add=@cssColors in sass.vim

[ap]

Hi,

I’ve merged this in my fork.

I do not use SCSS myself, though, so I am somewhat dependent on the people who do for resolving any bugs or implementing features.

[bdesham]

@ap

For people using SCSS (a variant of SASS), you should change

autocmd FileType sass,stylus syn cluster sassCssAttributes add=@cssColors

to

autocmd FileType sass,scss,stylus syn cluster sassCssAttributes add=@cssColors

There is still a problem, though… I made this change in my local copy, but I only saw the colors in SCSS files after manually triggering the autocommand with something like se ft=scss or :e %. (The filetype was already correctly set to scss.) I’m not sure if this is an issue with your script or with some other part of my configuration.

[ap]

@bdesham, after pulling in a change is now the way you asked from @Mange it is now the way you asked for.

[bdesham]

@ap: Cool, thanks! When I get a chance I'll see if I can track down the source of the other behavior I saw, and if it's a problem with vim-css-colors I'll fork and fix.