• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Menu
  • Back to Top
  • Services
    • Web Design
    • Graphic Design
    • Web Hosting
  • Portfolio
  • Pricing
    • FAQ’s
  • About Me
    • Blog
    • Contact

SCSS Media Queries Produce Faster Responsive Design

Web Design

November 1, 2017Dan BrubakerComment

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:

https://gist.github.com/danbru1989/d600cddd8eab83b584aee19d153591df

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:

https://gist.github.com/danbru1989/440a75f36c31d81e62a71976674ba21c

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

The Negative

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.

Conclusion

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!

Filed Under: Tips & Code Snippets

About Dan Brubaker

I am a husband, father, evangelist, web designer, and sometimes farmer. My family and I live full-time in an RV and travel around representing Servant's Heart Camp. My workspace is small, but the window view is great!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Contact Me

  • (717) 991-1426
  • danbru@gmail.com

Mailing Address:


5050 Colebrook Road
Hershey, PA 17033

RSS Ministry Updates

  • Ministry Changes & Moving November 4, 2020
  • Revival Ministry and HFA Crusade September 23, 2020
  • Attend Our Online Rally! April 16, 2020
  • Winter Ministry & Outreach February 11, 2020
  • Happy New Year! January 1, 2020
  • Last Meeting And Winter Work November 18, 2019
  • Continued Fall Revival Meetings November 4, 2019
  • Visiting The Quecreek Mine Rescue October 14, 2019
  • Menu
  • Back to Top
  • Services
    • Web Design
    • Graphic Design
    • Web Hosting
  • Portfolio
  • Pricing
    • FAQ’s
  • About Me
    • Blog
    • Contact

    Services

  • Web Design
  • Graphic Design
  • Web Hosting

    Information

  • About Me
  • Portfolio
  • Pricing
  • Privacy

    Contact Me

  • (717) 991-1426
  • danbru@gmail.com
Log In
Copyright © 2023 — Brubaker Design Services