Does SublimeText Not Allow $variables in snippets?

Question

Ok, so I am having a small problem, more of an annoyance. And it brings up a question of why sublime text is acting this way. Yes, although this is compass and sass markup, the question is related to sublime text snippets.

So this is the code I want to repeat in a snippet through sublime (my end goal):

$default-box-shadow-color:  #333333;
$default-box-shadow-h-offset:   0px;
$default-box-shadow-v-offset:   0px;
$default-box-shadow-blur:       5px;
$default-box-shadow-spread:     false;
$default-box-shadow-inset:  false;

and so i make a new snippet and this is how I input it:

<snippet>
<content><![CDATA[
    $default-box-shadow-color:  ${1:#333333};
    $default-box-shadow-h-offset:   ${2:0px};
    $default-box-shadow-v-offset:   ${3:0px};
    $default-box-shadow-blur:      ${4:5px};
    $default-box-shadow-spread:     ${5:false};
    $default-box-shadow-inset:  ${6:false};
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>defaultboxshadow</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.sass</scope>
</snippet>

Everything seems good right? You are probably thinking, "this guy doesn't know how to make a snippet! Why is he wasting my time?" Well just watch this... when I use the tab trigger in my main document to invoke this snippet, this is what it outputs:

-box-shadow-color:      #333333;
-box-shadow-h-offset:   0px;
-box-shadow-v-offset:   0px;
-box-shadow-blur:       5px;
-box-shadow-spread:     false;
-box-shadow-inset:      false;

Weirdly enough... all the

$default

parts are gone. So I am hoping that someone has an explanation for me. Or is this a bug in sublime?

Here are some things I know (98% certainty) are not the problem:

1. The tab trigger part, when I use the tab trigger it works minus this one thing. No other tab trigger competes with this one. I changed the trigger to complete mumbo-jumbo and I can see that it recognizes it without conflict of other triggers
2. The scope. I am sure that alot of you will think that there is no source.sass scope, but I have added one after the fact, so my sublime has one. I have tried it with no scope, and it has the same problem. So it's not that.
3. The highlighting order, I removed these, and i had the same problem.
4. I have tried changing the original tab level to see if somehow the tab order was causing a problem

So alas, here we are. I have troubleshot it and I think it has to do with the $ in front. When I remove the dollar sign i get

default-box-shadow-color: #333333;

which is close, except that compass needs that dollar sign and the whole point of the snippet was to make my life easier.

Is there a way to character cancel the $? is this a known issue? Am I doing something wrong or should I bring this up with the devs of sublime? I would like to just be able to use this if I could. Any help would be appreciated. Thanks.

Answer 1

Escape all of the $default variables with a \

<snippet>
<content><![CDATA[
    \$default-box-shadow-color:  ${1:#333333};
    \$default-box-shadow-h-offset:   ${2:0px};
    \$default-box-shadow-v-offset:   ${3:0px};
    \$default-box-shadow-blur:      ${4:5px};
    \$default-box-shadow-spread:     ${5:false};
    \$default-box-shadow-inset:  ${6:false};
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>defaultboxshadow</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.sass</scope>
</snippet>