How to get better SASS intellisense in VS Code?
In Visual Studio (not VS Code), you get some green underlines on undeclared variables. When
@import is used everywhere, this can be annoying in partials because pretty much everything will be undeclared until imported by your top level SASS file. But with @use (which I'm new to btw, so any guidance is welcome), it can finally be use-ful! Only problem is, VS still doesn't support @use. But I should really be using VS Code for this anyway... but in VS Code, I find the intellisense is even worse. No underlines for variables at all, and Go To Definition doesn't work on the variables even when @import or @use are used, which actually does work in Visual Studio, but only with @import.
I figured the out-of-the-box SASS editor experience would be great in VS Code, but it's not. Are there some extensions you guys recommend to make it better?
3 Replies
you are doing it wrong: use and import are different
import imports things into the global scope
use forces you to use it within the namespace of the file, inside every single file
however, you are trying to use
@use as an @import, and that just doesnt work
@use is a shitty replacement for @import, mostly because it doesnt do anywhere near the same thing
if you want to use variables with use, you will need to use variables.variable-name-comes-here
HOWEVER, you can also do @use 'variables' as * to use $variable directly
you MUST do this for EVERY SINGLE FILE that you need any variable in
also, personally, i use the extension "scss intellisense" from mrnlnc, and "some sass" from somewhat stationery
those 2 do different things well, and they do have functional definitions that you can jump to
but your code has to be working as it should firstThank you, I forgot the
as * part. Sadly, even when I correct it, VS seems to not recognize @use at all, and VS Code still is like "what do you want me to do with that?"
I'll check out those extensionsthe built-in functionality is pretty lacking, but almost does the thing
i use both because one shows better where a mixin or function is, and the other shows documentation for the functions and mixins you wrote yourself
and some small things too
"some sass" supports modules while "scss intellisense" doesn't but has auto-complete
"some sass" says to do not install both, but, both lack things :/