Vscode: [scss] instellisense doesn't work when importing variables from separate file

[jkanczler]

• VSCode Version: 1.1.1
• OS Version: Windows 7

Steps to Reproduce:

1. Create an scss file with a simple variable
2. Create another scss file that is importing the previously created scss file
3. Try to implement a class in the second scss file and try to use the variable in there. Intellisense is not working inside a class, just outside a class:

[aeschli]

Yes, our css/less/sass supports are single file only.

[towertop]

I was looking for this and got told that visual studio 2013 ever support this with additional comments:

https://blogs.msdn.microsoft.com/webdev/2013/11/06/a-high-value-undocumented-less-editor-feature-in-visual-studio/

It would be gorgeous if vscode inherit it. :)

[third774]

Definitely +1 for this feature request! :+1:

[tgrosh]

+1

This is a must have feature for me. Every time I sit down to do my LESS work, I always end up switching back to Visual Studio so I can get the references for my variables and mixins. This needs to happen.

[mattez]

What about suggest variables from another opened file also? Or from files in the same directory. not only from linked ones.
Or you know how looks for example directory with LESS files in Bootstrap 3... One main file with @includes of partial LESS files one of them with only variables and one subdirectory with mixins. So best behaviour should be to intelligently scan for other LESS files and includes and suggest variables this way.

[mattez]

Similar thingss are discussed in these issues https://github.com/Microsoft/vscode/issues/10762 and https://github.com/Microsoft/vscode/issues/6820

[mattez]

Both popular editors - Brackets and Sublime - support this via extensions.

• Brackets have LESShints.
• Sublime have SublimeAllAutocomplete

I just want to switch to VSCODE and lack of this functionality is pretty big blocker for me. I'm really surprised that this essential feature for front-end developers is still missing in so clever editor which vscode surely is.
If you are familiar with Bootstrap you know how annoying is write repetitively e.g. '@line-height-computed' or '@grid-gutter-width' or any other variables again and again...

And what about to change title to contain also LESS and SCSS key words and reflect what we are looking for: something like:
[scss] Add feature to instellisense to support Less/Sass cross file variable resolution and also variables from imported separate files or something like that.

[mattez]

How can I support this feature to be done? It should have higher priority.
Yeah I find way in CONTRIBUTING.md

If you find your issue already exists, make relevant comments and add your reaction. Use a reaction in place of a "+1" comment.
:+1: - upvote
:-1: - downvote

So please you all front-end developers who want to use _vscode_ and LESS/SASS please upvote by adding a :+1: reaction to the first post.

In a mean time Im going back to Brackets.

[mrmlnc]

Firsly, @mattez, thank you for your interest. I think developers would like to add all requested features, but now it is impossible.

From @bpasero

Since we are a small team of developers, there is only so many feature requests and issues we can work on for one milestone. Nevertheless we always welcome pull requests and are happy to accept them if they meet our quality standards.

I'm not an employee of Microsoft, but I write extensions for this editor and I'm interested in the evolution of this editor.

I also use Less in their projects and even wrote a book about Less in my native language. I am also waiting for this functionality.

And now let's talk about functionality. Please, @aeschli, tell me, this functionality should be implemented in vscode-css-languageservice or as separate extension? (If also think about the suggestions for mixins and their parameters)

If as an extension, then I'm ready to create it. Anytime Soon.

[mattez]

Thank you @mrmlnc for your support.
I'm really happy to see fist attempt to begun to solve this specifically. Hurray.

I know nothing about development strategies, but don't you can start on developing _extension_ which could then later can be integrated to and became part of _vscode_?

BTW I have not tested jet (I'm more LESS user) but there is SASS extension already.
But in general as a user I prefer "implemented" solution or very very good writen :) extension witch no interfere with existing features of _vscode_ mainly it's _IntelliSense_.

And there is such a big part in _default-settings.json_ dedicated to _SASS_ and _LESS_ so it looks like _vscode_ want to support these languages deeply.

[mattez]

Hi @mrmlnc have you got any hints from @aeschli ?

[mrmlnc]

@mattez, nope, but I'm working on an extension for Less (Sass later) 🌵. Think will be ready tomorrow. Will Intellisense support for variables and mixins (with nesting) from all imported files.

[mrmlnc]

@towertop, @tgrosh, @mattez, please, help me testing vscode-less extension ❤️.

[mattez]

@mrmlnc I just installed you brand new hot extension. IT JUST WORKS so far. So I'm going to use it on a real projects.
I looks gr8. Thank you very much @mrmlnc .

[bgashler1]

This would come in very handy, especially if we as VS Code are going to switch our styling to SCSS #8589. It would already help us today on our website (I've ran into much of the same pain as mentioned here).

[mrmlnc]

@bgashler1, I planned SCSS IntelliSense for next week. Now I want to identify problems in the current solution (performance [important], information in popup's and more cases).

---

UPD [24.10.2016]: Task moved to this week. Sorry 🐼

[mrmlnc]

@netopolit, @mattez, @bgashler1, @druellan, @marvinhagemeister,

Please, help me test testing vscode-scss extension ❤️.

[druellan]

Seems to work pretty well!

In fact, too well:

Perhaps a way to ignore a path is needed. Also, not sure if the "implicitly" is so useful that worth taking up space for the path and the variable contents.

Another thing I noticed, and this can be a VScode problem:

If you write the property, hit ctrl+space and then you keep typing, the autocomplete is not refreshed.

[MaximeDesRoches]

It seems to be working fine.

I'm getting this in the panel:

[Error - 10:27:01 AM] Request textDocument/hover failed. Message: Request textDocument/hover failed with message: Cannot read property 'type' of null Code: -32603

[druellan]

Another thing, I'm getting contextual help on every item inside a mixin:

[mrmlnc]

@druellan, @MaximeDesRoches,

Thanks for help! I really appreciate this.

I have repository for this plugin (https://github.com/mrmlnc/vscode-scss) and progress over your comments you can check there (I created issues for your comments).

[sjova]

+1

[lynnchen1020]

vscode-scss just works perfectly!
Would like to know if it is possible for sass version? Thanks.

[Ne-Ne]

• 1, Have there been any updates on this issue?

Thanks.

[smspivak]

solved
https://github.com/Microsoft/vscode/issues/23815

[PixelT]

No, it's not solved
Unfortunatelly, https://github.com/mrmlnc/vscode-scss stop working too :(
Finally, this functionaly is "must-have" by default...

[felixfbecker]

With @import and variables being a native concept in CSS, imo this really needs to be part of the built-in CSS/SCSS/Less support. I love @mrmlnc's extension but it is unable to resolve files in many cases when using @import, which makes me wish this was supported natively.

[mirkea]

Why is the SCSS format the unwanted child of stylesheets when it's arguably the best syntax to use? I feel like I'm getting punished for using the optimal solution

[mrmlnc]

@octref, I correct understand that the VS Code team wants to work on a solution that will work as drop-replacement for my plugins (vscode-scss & vscode-less)? That's cool (if it's cool), because now I don't have much free time to support these plugins.

[octref]

@mrmlnc Just looking into the problem to understand it better before committing to any promises.
What's some of your biggest pain points in maintaining vscode-scss/less? Are any existing issues impossible to fix or requested features impossible to do?

Merging might make sense, but that involves converting css-language-service to support projects instead of single files. This is a lot of change.

[onetrev]

I'd love to see a merge into css-language-service, as then I'd assume there would be support across projects for things like CSS custom properties / variables, which are very much the future.

[octref]

SCSS variables and CSS variables are very different in scopes. So let's not confuse things here.

Accurate CSS variable completions require understanding of the DOM tree since CSS variables are scoped based on DOM structure.
CSS @imports can even be remote files. The way you serve the CSS files on your website could also have different structure than the CSS source files.

On the other hand for SCSS variables/mixins/functions, it's possible to analyze them, resolve dependencies and output suggestions accurately. However that would take quite some effort.

So my suggestion would be to use https://github.com/mrmlnc/vscode-scss for now, which scans through your working dir and outputs completions globally. Anyway in SCSS variables are global by default.

[Haemp]

@octref Unfortunately that plugin is quite broken - won't even resolve @import paths as it stands now. Would love to see some attention put on this since SCSS is still a major tech for most devs.

[octref]

@Haemp Just as we were speaking! https://github.com/Microsoft/vscode/pull/55971

[cduivis]

Issues have been created stating that the same thing happens for the less filetypes, but are closed as duplicate referencing this issue.
Variables in less are still not auto-completed when @importing other files.
Could the title be adjusted to be more generic, or to also include less ?

[KytoSai]

I hope anyone continue develop vscode-scss extension
https://github.com/mrmlnc/vscode-scss/issues/78

Currently vscode does not have the scss extension good enough and is still developing...

[BradCandell]

Glad to hear that it's making its way into #83930

It's making SCSS development less ideal following conventions like externalizing variables and code completion of functions. The extensions that are recommended just don't seem to be cutting it!

[rjgotten]

Glad to hear that it's making its way into #83930

Just hope it's _also_ making its way into there for Less and not just scss.

[octref]

I helped vscode-scss with its development for a bit. I prepared a new release, 0.8.0 and @mrmlnc could release it to Market Place.

During my test I think vscode-scss works pretty well. So instead of copying over its features I helped with its development. Over the time we might consider adding multiple file support in VS Code's CSS/SCSS/Less support, but we don't want to commit to it yet.

For Less, you can checkout vscode-less, by the awesome @mrmlnc as well.

[vscodebot[bot]]

We try to keep VS Code lean and we think the functionality you're asking for is great for a VS Code extension. Maybe you can already find one that suits you in the VS Code Marketplace. Just in case, in a few simple steps you can get started writing your own extension. See also our issue reporting guidelines.

Happy Coding!

[aeschli]

To verify, install the vscode-scss extenssion