Emmet is a shorthand system for front-end developers, so if you're an ex-stenographer or you just get a kick from coding by dictation, you're gonna love it. Even better: you can add your own shortcuts too.
First things First: Install Emmet
If you’re building websites via Sublime and you haven’t installed Emmet yet, go do that now. Why, you ask? Because I couldn’t imagine writing CSS without it. The CSS module of Emmet is basically stuffed full of Sublime Snippets for CSS. Even better, the snippets can be given units (Note that ‘x’ translates to ‘ex,’ not ‘px’):
| Type | Becomes | Type | Becomes |
|---|---|---|---|
| db | display: block; |
fz10 | font-size: 10px; |
| psa | position: absolute; |
bdrs10x5e | border-radius: 10ex 5em; |
| tac | text-align: center; |
m10p10 | margin: 10% 10px; |
I installed Emmet without really knowing what it did, so for the longest time, I thought that these snippets were just built into Sublime. While there are a proverbial crap ton of them (see the cheat sheet for a lot more), there are a few snippets that we could add to it that would make our lives easier. If you’re writing SCSS, grab the SASS Snippets package along with Syntax Highlighting for SASS.
I wish that there was a snippet for margin: 0 auto; in Emmet, but there’s not. Fortunately, you can add your own custom snippets. Go to: Preferences -> Package Settings -> Emmet -> Settings – User, and add this gist:
Using this method, you can add as many snippets as you want, for either CSS or HTML. Now let’s get a little more complicated:
Tab Placeholders And Ignored Characters
In this gist, I’ve created snippets for a handful of CSS pseudo-elements. What I wanted to do was type something like pbef and get p:before, but instead I got padding-bottom: 4px. After some trial and error, I figured out that you need a separator character between the element (p, div, ul, .class) and the abbreviation (bef).
A colon would be a good choice here, seeing as all pseudo-elements use colons anyway. But Emmet did something weird with colons: it took p:b4 and gave me :;. Not really sure what to do with that. So I settled on the semi-colon instead, which is a) in the same place as a colon and b) faster to type.
The second peculiarity with these pseudo-element snippets is that I’m using placeholders ($1, $2, etc.). That’s so that after you first hit TAB to expand the abbreviation, the cursor will move to the next placeholder so that you can continue with your input.
Sublime Snippets for Other Languages
You can also add Snippets to Sublime using the .sublime-snippet suffix. You’ll need to put this in your Sublime User folder, which you can quickly find by selecting “Browse Packages” in the Package Control menu. Adding the following snippet would output an HTML-commented out print_r statement.
2 More Tips
- You can save this anywhere inside the User folder– I’m grouping mine inside of a folder called Snippets.
- I would highly suggest committing the non-sensitive portions of your User folder to Github or Bitbucket, so that retrieving them no matter what computer you’re on is an easy task.
