SASS variables are not working in .scss file - sass

Question

I'm having trouble with sass variables. The browser is telling me i am using invalid property values and i can see the code editor is not picking up the variables i am using because it's not colorizing them.
I have uninstalled and reinstalled sass and gulp-sass but that didn't fix the problem and i'm out of ideas. I'm sure it's something really simple.
Key Facts
I am on windows 10
I installed sass using npm install sass
i installed gulp-sass using npm install gulp-sass
I am successfully compiling the .scss file into the .css file
i am currently trying to create the variables in an .scss file
This is my .scss file
$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;
body {
display: flx;
min-height: 100vh;
flex-direction: clm;
}
main {
flex: mpage;
}
.item-wrap{
justify-content: sb;
}

Answer 1

In order for Sass to read your variables, when you call them you have to hang the $ character in front of them, as you did when you declared them.
Example:
$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;
body {
display: $flx;
min-height: 100vh;
flex-direction: $clm;
}
main {
flex: $mpage;
}
.item-wrap{
justify-content: $sb;
}