Unknown CSS Tab Completion in Sublime Text

Question

I've seen "Tuts+. PSD to WordPress – Minimal Portfolio Theme" and the author uses the tab completion "sep" and then presses tab and voila he gets multiple line comment separator for CSS something like:

/****************************************************************************/
/* Name Here */
/****************************************************************************/

I want to know how can I achieve this in sublime text? Using what package?

Answer 1

The tab completion you saw was most likely a custom snippet

Go to Tools > New Snippet and add the following code

<snippet>
    <content><![CDATA[
/****************************************************************************/
/* ${1:Name Here} */
/****************************************************************************/
]]></content>

<tabTrigger>sep</tabTrigger>
<scope>source.css</scope>

</snippet>

---

The ${1:Name Here} is a variable that will focus your cursor to that point

The <tabTrigger>sep</tabTrigger> is the defined text that will fire the snippet code with tab

The <scope>source.css</scope> indicates that the snippet will fire when your syntax is set to CSS.

Save with the .sublime-snippet file extension. Example: css-sep.sublime-snippet