#120: A Sublime Text Snippet for Media Query Mixins

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:

@include breakpoint(${1:papa-bear / mama-bear / baby-bear}) {
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->

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.


  1. User Avatar
    Cameron Spear
    Permalink to comment#

    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?

  2. User Avatar
    Permalink to comment#

    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.

  3. User Avatar
    Permalink to comment#

    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

  4. User Avatar
    Permalink to comment#

    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!

  5. User Avatar
    Permalink to comment#

    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!

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I tried TAB but it didn’t go. Might be Emmet.io interference. Return works for me for now.

    • User Avatar
      Permalink to comment#

      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.

    • User Avatar
      James Nowland
      Permalink to comment#

      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.

  6. User Avatar
    Permalink to comment#

    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

  7. User Avatar
    Permalink to comment#

    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
    and of course assigning commonly used patches of code to single key triggers.

  8. User Avatar
    Permalink to comment#

    sorry its missing the () there
    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”

  9. User Avatar
    Permalink to comment#

    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 typing mq:


    I’ve included some variations in the comments at the bottom as well. Copy, paste, and modify as needed.

  10. User Avatar
    Permalink to comment#

    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

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.