One of the main reasons that I switched from using standard CSS to SCSS was to speed up my development of responsive web designs. I was deeply frustrated by the time and effort it took to get “pixel perfection” at all screen sizes.
Back in the days of traditional CSS, I would often quit after things were decent, but, in truth, I was stopping short of a quality job – and I knew it!
Here is my SCSS solution that solved these frustrations and greatly improved my workflow:
The above code is a SASS mixin that takes care of my media queries for me. To utilize the mixin during everyday work, I’m often coding something that looks like this:
A Little About The Code
In the past, I had learned that a “mobile first” approach was the best way to tackle responsive web design. This is why I chose to use the min width property rather than max width. (For more details, go here)
Also, I wanted to try to keep my typing to a minimum, so I chose to simply name my mixin “mq()” and abbreviate keywords such as “s”, “ms”, and “l” for “small”, “medium-small”, “large”.
This solution lacks a quick and easy way to specify a custom break point. You are restricted to the set of defined variables above. Some developers may require that ability, but I have not found it to be a major issue. To compensate, I’ll just shrink my trouble spot a little more for a smaller screen and move on.
I was really excited when I finished crafting my media query mixins and thrilled when it started saving me so much time!
How have you done your SCSS media query mixins and what improvements could I make with mine?
Please let me know in a comment below. Thank you!