#120: A Sublime Text Snippet for Media Query Mixins

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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.