in Articles

Media Query Snippet for Sublime Text

Declaring CSS Media Query rules has become standard practice during my recent responsive design projects. But declaring those rules has stunted my coding flow because I can never remember the correct syntax for a media query.

Even though I’ve written out the media query declaration hundreds of times, for some reason I haven’t committed the syntax to memory. I’m always looking back at a previous media query rule and pasting it to a new spot in my CSS file to declare a new breakpoint. This has become tedious because I have to stop my current flow and sift through my CSS document to find a previous media query, copy that rule, scroll back to where I was, and then paste the rule. And I’m still not done. I then need to edit the rule accordingly to change the ems or pixel breakpoint, or change the rule from max-width to min-width, or vice versa. First world problems, I know.

Since I primarily use Sublime Text 2 for editing, I decided to create a snippet that would help with whatever brain damage prevents me from memorizing the media query syntax. Now, all I have to do to create a min-width or a max-width media query is simply type ‘mq’ into Sublime and a contextual menu pops up that allows me to select the snippet (or I can press Tab). Once I’ve selected the snippet, the code is pasted into the editor, and I can type ‘min’ or ‘max’ to create the corresponding rule. I can then tab once more to add a value to my media query. Then tab again to place my cursor inside the newly created rule and start adding CSS rules.

Here is the snippet I have been using regularly. It handles min-width or max-width:

Media Query Snippet

@media screen and (${1: max or min}-width: ${2: enter value here}) {
  <!-- 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> -->

Please give the snippet a try and let me know what you think. I hope someone else finds this snippets useful.

You can find this snippet as a Gist as well:

For more information on how to add a snippet to Sublime text, please see the following link:

Leave a Reply