{"id":9732,"date":"2014-07-30T07:27:59","date_gmt":"2014-07-30T14:27:59","guid":{"rendered":"\/?p=9732"},"modified":"2017-10-13T08:24:30","modified_gmt":"2017-10-13T15:24:30","slug":"write-media-queries-right","status":"publish","type":"post","link":"https:\/\/needmoredesigns.com\/write-media-queries-right\/","title":{"rendered":"Write Media Queries Right"},"content":{"rendered":"

We’ve completely changed\u00a0the way we write responsive breakpoints here in the studio. Looking back at our former agony, our previous method is practically dark ages material. We’re here to show you a better way.<\/p>\n

It’s often written\u2014and possibly accepted as best-practice\u2014that you should separate your media queries by device class. You might have a “small” and a “medium” and a “large” file, for instance, and you include each one in turn, so that you’re including some base CSS files, along with a series of files for each device.<\/p>\n

The problem is that, if you are looking for what’s influencing a particular element on the screen, you often have to dig through each of those files. This is because I often define a simple set of rules for the smallest device (phone), and then a series of rules for each larger size. So you might have to look at a lot of files, digging through each, to find your rule.<\/p>\n

This. Totally. Sucks.<\/em><\/p>\n

Enter\u00a0SASS<\/a>,\u00a0about the greatest thing since sliced bread to a web designer like me. It lets you break apart your files in a very clean fashion, put them back together with mixins, and lets you structure your code in a way that’s far clearer than CSS by itself. Not to mention the addition of variables and math, so that instead of writing 40px<\/code>, you can write something much more clear such as $lovely_margin * 2<\/code>.<\/p>\n

I much prefer to break my files apart by their purpose. I’ll have a basic style.scss<\/code> file, whose purpose is to load all my other files. I’ll have a styleguide.scss<\/code> file to set up the colors, fonts, and common dimensions the project should use. There will be a file to set up the grid structure, and I’ll have a file for each of the site’s sections.<\/p>\n

There will also be a mixin.scss<\/code> file, which has common functions and fixes we use on a lot of projects. For this, I’ve adapted an incredibly simple mixin for SASS that lets you write all your rules in place.<\/p>\n