Creating Sublime Text 3 Snippets for CSS Selectors

StackOverflow https://stackoverflow.com/questions/21392320

Question

I'm using ST3 and trying to create a snippet to quickly output the first child selector. I have saved the file with a .sublime-snippet extension in the Packages/User location. My snippet code:

<snippet>
    <content><![CDATA[
:first-child {}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>first</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.css</scope>
    <description>first-child</description>
</snippet>

So when I type div and then the tabTrigger text, the new snippet does not appear in a list or when I press the Tab key. What do I have to do to get it working?

( Note: I've noticed that it works only inside curly braces but this is useless as it needs to work for the CSS selectors which are outside the braces! )

Was it helpful?

Solution

Unfortunately, you can’t easily combine ST and Emmet snippets in CSS due to some technical problems. As a workaround, you can create snippets right in Emmet:

OTHER TIPS

There is a way and it is as follows (using a Mac with OS X):

1) Download and install Package Resource Viewer

2) Open the Command Palette within ST3 (accessed typing Command+Shift+P in Mac, or Ctrl+Shift+P in Windows)

3) Type PackageResourceViewer: Extract Package

4) Select the CSS option

5) Now in the menu go to Sublime Text / Preferences / Browse Packages (a folder window will pop up)

6) Go to the CSS folder within the Packages folder

7) Select the file named Completion Rules.tmPreferences and drag it to ST3 so that it opens it

8) One line says <string>source.css meta.selector</string>. What you have to do is to delete source.css meta.selector, so that you now have <string></string>

9) Save

10) Quit ST3 and re-open it

Now you are done and your snippet should work.

I was having a similar issue where Sublime Text 3 was not expanding my snippets in CSS, they would work with a tab inside Sass or Scss files, but not CSS. They would expand, however, by pressing Ctrl+Space (on Mac)

The above answer, updating the CSS package, broke my intelliSense (autocomplete no longer worked) However leaving <string>source.css</string> and simply removing meta.selector fixed both issues for me

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top