7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.3 How to Create Snippets

[SOUND] In programs like TextMate or Sublime, whatever you're using, they generally have snippets built in. So, for example, if I come here, I have within my user, I've created a set of CSS snippets. Now, yours will likely have some built in. Generally, I prefer to create my own, and that's because I found when using somebody else's snippets, you always forget the shortcut and you don't use them. So if you create them yourself, you force yourself to create a system and remember them in the process. For example, when creating CSS, for my snippets, I use the first letter of each word as the key. If I want to float something to the left, I use fl as the keyword. fl plus tab, and that expands it. If I wanna float it to the right, fr, tab. If I need a width, I can type w and that expands. If I need a margin, m. But what if I need margin on two sides only? I do m2, and that creates it. And I can tab through these, and it's much quicker. It'll save you a massive amount of time. If you're working with me in Sublime and you want to create your own, you can go to Tools > New Snippet, and right here, don't let this confuse you. All you need to do is specify your snippet. So if I want a hello world snippet, I can type hello world, and we'll leave this blank for now. And now if you want to tag trigger, I can press Cmd forward slash in Sublime to remove that, or you can do it manually. And I'm gonna keep that to hello, and we'll leave that like this for the time being. Next I'm gonna save it, and we're gonna save it into our user as hello.sublime-snippet. That's important. Now if I want to use this snippet anywhere in this case, I can type Hello, tab, and that expands. If we want to have some more flexibility, I can go right here and change this to Hello. And what this is saying is, this is the first tab stop. Right here, but we're going to set a default of Hello. Now, when I type it again, it will select this so I can override it if I need to. If you want to have another tab stop and we'll say, how are you doing, and I'm going to, instead of doing today, I'm gonna make that optional. So I'm gonna do the second tab stop will have default of today. Now I will save it, try it again. Hello. And now you can see we have multiple tab stops. So I can change that to what? Hit tab again. And what are you doing tomorrow? And that saves quite a bit of time. So I highly recommend that you do some yourself. If you wanted to do, for example, the M4 that I showed you. M4 or M2. Let's do one together and we'll do M2. We are gonna change this to margin, and the top and bottom will have a default of 0 and the left and right will have a default of 0 as well. Now we're going to make these tab stops so 1 will have a default of 0 and 2 will have a default of 0 as well. Then I can remove this. For now, because this is a sample, I'm going to set a tab trigger of Hello. And then right here if you want to specify a source, you can limit this tab trigger to only a specific type of file. Like CSS. I'm gonna come back and now if I type Hello, which is a ridiculous shortcut, but it works for our demo, you can see it's not working and that's because we have specified a scope. So I'm gonna comment that out again. One more time. And now that's expanded two pixels, four pixels and we're done. So this is what I'm gonna do for the rest of our lesson. I highly recommend that you do the same.

Back to the top