Repository navigation
[scss] instellisense doesn't work when importing variables from separate file #6734
Description
- VSCode Version: 1.1.1
- OS Version: Windows 7
Steps to Reproduce:
- Create an scss file with a simple variable
- Create another scss file that is importing the previously created scss file
- 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:
Activity
aeschli commentedon May 24, 2016
Yes, our css/less/sass supports are single file only.
towertop commentedon Jun 28, 2016
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 commentedon Sep 11, 2016
Definitely +1 for this feature request! 👍
tgrosh commentedon Sep 14, 2016
+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 commentedon Sep 29, 2016
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 commentedon Sep 29, 2016
Similar thingss are discussed in these issues #10762 and #6820
mattez commentedon Sep 29, 2016
Both popular editors - Brackets and Sublime - support this via extensions.
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 commentedon Sep 30, 2016
How can I support this feature to be done? It should have higher priority.
Yeah I find way in CONTRIBUTING.md
So please you all front-end developers who want to use vscode and LESS/SASS please upvote by adding a 👍 reaction to the first post.
In a mean time Im going back to Brackets.
mrmlnc commentedon Sep 30, 2016
Firsly, Matěj Kříž (@mattez), thank you for your interest. I think developers would like to add all requested features, but now it is impossible.
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, Martin Aeschlimann (@aeschli), tell me, this functionality should be implemented in
vscode-css-languageserviceor 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 commentedon Oct 1, 2016
Thank you Denis Malinochkin (@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 commentedon Oct 11, 2016
Hi Denis Malinochkin (@mrmlnc) have you got any hints from Martin Aeschlimann (@aeschli) ?
32 remaining items
BradCandell commentedon Nov 7, 2019
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 commentedon Nov 15, 2019
Just hope it's also making its way into there for Less and not just scss.
octref commentedon Nov 15, 2019
I helped vscode-scss with its development for a bit. I prepared a new release, 0.8.0 and Denis Malinochkin (@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 Denis Malinochkin (@mrmlnc) as well.
vscodebot commentedon Nov 15, 2019
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 commentedon Dec 3, 2019
To verify, install the vscode-scss extenssion
Release notes for microsoft/vscode#6734