Can't get custom snippets to work

Question

I'm trying to create some custom snippets. Here is an example of one:

<snippet>
    <content><![CDATA[
        @media screen and (min-width: \$break-small) {
            $0
        }
        @media screen and (min-width: \$break-medium) {
            $0
        }
        @media screen and (min-width: \$break-large) {
            $0
        }
        @media screen and (min-width: \$break-xlarge) {
            $0
        }
    ]]></content>
    <tabTrigger>breakpoints</tabTrigger>
    <scope>source.scss,source.css</scope>
</snippet>

I save this in the /packages/user/ folder as breakpoints.sublime-snippet. Then I exited sublime text and restarted it but the snippet was not available. Any ideas what the issue is?

Answer 1

Alright, the issue is that source.scss is incorrect. It should be source.sass. Not really intuitive since I am using scss syntax, not sass syntax, but it works now.

Answer 2

A couple of issues. First, $0 indicates where the cursor will end up at the end, after filling in all other fields, so you can only have one of them per snippet. Second, I assume $break-small, $break-medium, etc. are SASS/SCSS variables, so you'll need to escape the $ dollar signs with a backslash \ in the snippet so it prints properly. So, assuming you want to keep all of these in the same file and tab through each field, make your snippet look like this:

<snippet>
    <content><![CDATA[
@media screen and (min-width: \$break-small) {
    $1
}
@media screen and (min-width: \$break-medium) {
    $2
}
@media screen and (min-width: \$break-large) {
    $3
}
@media screen and (min-width: \$break-xlarge) {
    $4
}
$0
    ]]></content>
    <tabTrigger>breakpoints</tabTrigger>
    <scope>source.scss,source.css</scope>
</snippet>

You'll tab through $1, $2, $3, and $4 in increasing order, and end up finally at $0, the exit point. I also fixed the indentation so your content is aligned to the left border and not indented, but you can of course change that to whatever indentation level you prefer.

Resave the file as Packages/User/breakpoints.sublime-snippet, restart just for fun (you probably don't need to, but it doesn't hurt), and you should be all set.