I’ve never messed with creating custom Sublime Text snippets before. So when James Nowland sent one in, I took the opportunity to learn. Here it is:
<snippet>
<content><![CDATA[
@include breakpoint(${1:papa-bear / mama-bear / baby-bear}) {
${2:}
}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>mq</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>The point of this particular snippet is to help with the authoring of media queries in Sass. As awesome as it is, there is a lot of typing @include breakpoint(yadda-yadda) { }, so this helps make that quicker.
Hey Chris, thanks for the video! I’ve been trying to get a buddy into SASS and doing Media Queries like this, and this came at a perfect time.
By the by, what’s with your cool Sublime Text “chrome?” Different icons, red tabs, etc. How/where did you get that?
Yes Chris, I’m also interested in that “theme”.
Hi Cameron you can find the theme on Github https://github.com/netatoo/phoenix-theme
For those of you who use Vim – definitely check out “snipMate” which brings TextMate and Sublime Text style snippets to Vim: SnipMate. It’s awesome!! I wouldn’t live without it. Especially for adding section style headings within your code.
Snippets are awesome, at work we have a HEAP of modules so putting them into Sublime Text snippets is a massive time saver. The one issue I did have was with Emmet installed, some of the tab triggers didn’t work correctly due to Emmet overriding them (not sure if that’s been fixed yet or not). Just an FYI
watching this screencast course made me fall in love with Sublime Text 2 – increased my workflow rapidly and changed how I code.
I would recommend it to Chris or anyone out there!
Hey, Chris, you might find it easier to hit TAB instead of RETURN? I do anyway.
Also, with the TAB triggers in the above snippet ($1, $2, etc.), any that aren’t wrapping around ‘choices’ don’t need the braces or the colon. So
${2:}can be written as$2.Finally, as you need to select the appropriate ‘bear’ every time you use this snippet, there might be a more efficient way to do it. The first thing that comes to mind would be to create snippets for each of them and remove them from this snippet, but another option might be to do this:
@include breakpoint(${1:papa-bear} ${2:mama-bear} ${3:baby-bear}})That way you can simply hit tab and delete the ones you don’t want. If there’s a better way to do this, I’d love to hear it!
Also, for those wanting to learn a little more about snippets, they can support multiple carets. For instance, let’s say that you are working with raw CSS and you want a quick way to insert all browser prefixes. You could do something like this:
That way you can type out the rest of the property and limit repetition.
If you decide to use multiple carets, then a good idea is to include another TAB trigger to get back to a single caret when you are done with the snippet. Here is how you would do that:
Here is a video showing that in action: http://cl.ly/3o18431K2F3V
I tried TAB but it didn’t go. Might be Emmet.io interference. Return works for me for now.
That’s really odd, Chris. I use Emmet and I don’t have any problems with TAB not working. Also, I find that RETURN behaves differently with multiple TAB triggers (i.e. returning to a new line), whereas TAB simply moves the caret.
With this set up on my machine I’m able to tab it. I also start typing the media query name I want and it usually auto completes itself.
The names in $1 were to make sure I recalled the order and the correct naming. It seems after typing it once sublime magically remembers it and auto completes it.
I would love to see more of the Sublime Text snippets. As always I am grateful for all the posts. I am working my way through the Lodge right now. Thank You
Thanks alot for the this one there are a whole bunch of snippets I use not not for sass as i havn’t learn’t that yet but I love emmet especially for writing css its increased my speed about three fold. some of my favorites are ul[class=menuitem$]6>li[bree$ car nothing cinamon]4^ul[class=end] (not that has any practical use but it gets the point through
html:5
and of course assigning commonly used patches of code to single key triggers.
sorry its missing the () there
ul[class=menuitem$]6>li[bree$ car nothing cinamon]*4^ul[class=end]
as for sublime text styles i reccomend the same phoenix dark blue colour with the nexus theme applied
“color_scheme”: “Packages/Theme – Phoenix/Color Scheme/Phoenix Dark Blue.tmTheme”,
“theme”: “Nexus.sublime-theme”
Here’s my media query snippet for Sublime. I prefix all my breakpoint variables with
bp-, so something like$bp-medium. Trigger the snippet by typingmq:https://gist.github.com/adamjohnson/435e63218c6882e7ade5
I’ve included some variations in the comments at the bottom as well. Copy, paste, and modify as needed.
not sure if anyone will see this post as this video is old… but did anyone know the plugin chris uses for the sass syntax in sublime? thankssss