add support for scss files

[mihaisucan]

vim-css-color doesnt initialize in scss files when scss-syntax is installed.

[runar]

I’ve submitted a pull request with support for SCSS files. If you can, clone my test branch and let me know if you find anything that’s not working as expected.

In its current state, scss-syntax sets the file type of SCSS files to scss.css, while the file type should be scss. I’ve submitted a pull request to fix this (cakebaker/scss-syntax.vim#41), but in the meantime you might have to manually set the file type of SCSS files like this: :set ft=scss

[LeonB]

Is this issue solved? When I open a scss file I don't get the syntax highlighting. Setting ft to css or sass fixes that.

[ap]

I’m afraid the issue remains open, just as its status indicates. This is mostly because I do not myself use SCSS (yet, at least – but I’ve intended to give it a spin for a while and never yet got around to it), don’t have a plugin for SCSS installed, and so I have no idea what this business about the value of the filetype setting is all about. And are there several plugins for SCSS? If so, do they use different values, and do they need interfacing in vim-css-color differently?

I’ve been meaning to sit down and survey the situation so I can evaluate the patches I’ve been given (I admit I have not been a good stewart in this respect), but… it never quite rises near enough the top on my list of priorities to be noticed, so this here issue has been stalled for far longer than it should have.

If someone wants to do my homework for me and tell me what the situation looks like overall and how it needs addressing overall (rather than just throw a patch over the wall – not that that isn’t appreciated! but I will be maintaining it afterwards so I need to understand why I’m making a change I’m making), I would be oh so grateful.

[runar]

I apologize for not replying sooner. Thank you for keeping the issue open for so long.

As far as I know, scss-syntax.vim is the only SCSS syntax plugin for vim. I submitted a pull request to change the default filetype to scss, and this pull request was merged into master in June.

There are a few other SCSS related vim plugins that I know of, including vim-syntastic-scss-lint and scss-snippets. Both of these use scss as their filetype. Syntastic, the syntax checking plugin, also uses scss for SCSS files.

To find out whether filetype=scss or filetype=scss.css is the most popular, I did a search here on GitHub. The first (scss) returned over 3,300 results, while the latter (scss.css) returned less than 170 results. It is worth mentioning that both ft=scss and ft=scss.css returned almost the same number of results.

There might be cases when you would like the filetype to be scss.css or something else, but in those cases it’s quite easy to override the filetype manually. One such case used to be if you would like to load SnipMate’s CSS snippets when editing SCSS files. However, since October, this is now done by default, so it’s no longer necessary to manually set the filetype.

My conclusion and opinion is that scss is the most common and most logical filetype for SCSS files.

[ap]

Thanks. Absolutely no apologies necessary; also, of course I’m not going to close an issue before it’s resolved. If any apologies are needed they are mine – I have been putting off dealing with this issue because it would be tedious work for me… so thank you muchly for doing all the legwork for me. It’ll take me a day or two to get to this, but I’ll be getting back to you soon.

[runar]

Is there anything else I can do to help you get closer to a decision? :)

[ap]

Hrmf. Actually that is not the only SCSS syntax plugin (even if it’s the only one on GitHub): Vim actually ships with a SASS+SCSS syntax by @tpope, and the highlight groups in that one have different names. Now, I have added the sassCssAttribute highlight group to the init() call in after/syntax/scss.vim, no problem – so now it works with the stock syntax/scss.vim that Vim ships with.

But I can’t get the scss-syntax.vim plugin to load instead of the stock one. I’d have to do that in order to test that it’ll work with either. (If I can’t figure out a better way I’ll just move Vim’s own files out of the way temporarily. But surely there’s a better way?)

Anyway, I’ve pushed an scss branch and you can at least tell me whether that works for you. Namely, please open your tests/example.scss file and check that the colours are highlighted as declared (of course) – are they all highlighted, are any of them missing? But more importantly, place your cursor in each of the colour declarations and run :echo map(synstack(line('.'), col('.')), 'synIDattr(v:val, "name")'). Do you get scssFoo highlight groups or sassCssFoo (or even both)?

If this works out I’ll ship it whether or not I’ve found a way to test it.

[runar]

I was not aware of the stock Sass+SCSS syntax plugin. A newer version of the plugin is available here on GitHub (tpope/vim-haml), and it appears that the SCSS syntax is identical to the Sass syntax, with the exception of comments (multi and single line) being placed in the scssComment highlight group.

Anyways, I examined the highlight groups both with and without scss-syntax.vim from @cakebaker, and here are the results:

Test	Stock syntax	scss-syntax.vim
background: #333; (?)	sassCssAttribute	scssAttribute
background: #666; (?)	sassCssAttribute	scssAttribute
background: #999; (?)	sassCssAttribute	scssAttribute
* Multi line comment: #123, #456 (?)	scssComment	cssComment
// Single line comment: #123456 (?)	scssComment	scssComment
$link-color: rgba(144, 0, 0, .5); (?)	sassCssAttribute	scssVariableValue
$text-color: hsl(0, 100%, 50%); (?)	sassCssAttribute	scssVariableValue
color: white; (?)	sassCssAttribute	scssAttribute
color: black; (?)	sassCssAttribute	scssAttribute

All colors are highlighted, and never with both sassCssFoo and scssFoo.

I’m using Vundle to load plugins (planning to move to vim-plug), and judging by the test results, the scss-syntax.vim plugin is loaded instead of the stock one.

I hope this helps!

[ap]

Thanks! I’m a little embarrassed at the effort you went to at my behest.

Particularly because, d’oh: I’m not using any of the known plugin managers, I’ve just got my own custom bundle loader (a stripped-down version of unbundle), which inserts the bundle paths after Vim’s paths in &runtimepath. If I change it to just put the bundles at the front of &runtimepath then I can load that SCSS plugin, no problem… of course. cringe

Sooo… I’ve (finally) been able to test this for myself and yes it works.

So now it’s shipped.

Thank you for your interminable patience.

[Adityashaw]

Most hex values and rgba values are not colored in scss file. Do you support scss?

For example, the rgba here are not colored

body {
    position: relative;
    background: linear-gradient(to bottom, rgba(0, 47, 75, 0.5) 0%, rgba(220, 66, 37, 0.5) 100%) fixed no-repeat;
    
}

but it is colored when changing it to:

body {
    position: relative;
    //background: linear-gradient(to bottom, rgba(0, 47, 75, 0.5) 0%, rgba(220, 66, 37, 0.5) 100%) fixed no-repeat;
    
}

The file is saved as style.scss and :set ft shows filetype=scss.