Kevin Powell - Community•6mo ago

Difficulty with Autocompletion for SCSS Variables in Visual Studio Code

I'm facing challenges with getting proper autocompletion for SCSS variables in Visual Studio Code. I have a separate SCSS file where I store all my variables (_variables.scss), and I'm importing them into another file (style.scss). However, despite using @use access these variables, the autocomplete doesn't seem to work efficiently. Is there a recommended extension or configuration to enable accurate autocompletion for SCSS variables across files in Visual Studio Code? Currently, I'm manually referencing variables like variables.$variableName, which becomes cumbersome with a growing number of variables. Any guidance or suggestions to streamline the autocompletion process for SCSS variables would be greatly appreciated! If someone could provide an example of how to use SCSS and CSS variables in separate files while ensuring autocomplete works in VSCode, I'd greatly appreciate it.

3 Replies

ἔρως•6mo ago

i use this extension: mrmlnc.vscode-scss also, if you use sass/scss, i recommend you to use index files you have a _variables.scss file instead, have a config folder, and add an index.scss file which @import your variables (yes, yes, i know), then you just @import the config file in your top most file that you compile to a css file

AlexB•6mo ago

Thank you very much for the quick response. I'm really grateful for your help; it finally works, something I've looked into several times but never managed to find the answer to. Isn't '@import' an outdated feature that's not widely supported anymore? I see '@use' as the replacement in the documentation. However, as you mentioned, I've created a 'config' folder within 'styles' in Next.js and named it 'index.scss'. _variables.scss

$max-width: 1200px;
$desktop-nav-break: 600px;
$break-mobile: 600px;

$cardImg-height: 50%;
$card-color-bg: var(--bg-100);

$max-width: 1200px;
$desktop-nav-break: 600px;
$break-mobile: 600px;

$cardImg-height: 50%;
$card-color-bg: var(--bg-100);

config/index.scss

@import '../variables';
@import '../themes';
@import '../mixings.scss';
@import '../typography.scss';
@import '../components/navbar.scss';
@import '../components/buttons.scss';
@import '../components/footer.scss';

@import '../variables';
@import '../themes';
@import '../mixings.scss';
@import '../typography.scss';
@import '../components/navbar.scss';
@import '../components/buttons.scss';
@import '../components/footer.scss';

global.scss

@use 'config/index' as *;

@use 'config/index' as *;

What are your thoughts on this? Thank you in advance for the assistance! Have a wonderful day! 🔥

ἔρως•6mo ago

honestly? you didn't reduce the components folder as well and don't use something called "config" to include typography and components

Gaming

Programming

Difficulty with Autocompletion for SCSS Variables in Visual Studio Code