I have this piece of code:
@mixin notificationCaret($left, $bottom: -.4em) {
   display: block;
   width: 2px;
   height: 2px;
   content: '';
   position: absolute;
   bottom: $bottom;
   left: 2em;
   border-bottom-width: 10px;
   border-bottom-style: solid;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom-color: yellow;
}

When I want to change the prop left to left: $left; I type:
left: $ and I expect the code completion for the variables, but no.

The $ turns into red and I got this message:
Error	line 218:19 Unexpected character(s) $ found	_header.scss.

Same happens for:

.myClass {
   color: $
}

If hit:

"color: " I got the color list code completion and on top of it, there is the color chooser. When I type $ after this, the whole list removes all entries except the color chooser. But my variables will not shown.


Regards

Chris