Grow your CSS skills. Land your dream job.

#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:

<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.

Comments

  1. 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. 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. MarkV
    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. 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. 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!

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

    • 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.

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

  8. Permalink to comment#

    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”

  9. 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:

    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.

  10. michael
    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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".