Managing breakpoints and media queries in vanilla CSS sucks pretty bad:
- Writing @media queries is annoying, and they’re separate from your main element styling.
- You can never remember the breakpoint values.
- CSS variables don’t work in media queries.
- Using standard media queries breaks scalability & maintainability.
- Issues are amplified when switching between max-width and min-width queries.
Managing breakpoints and media queries in SCSS is light years better.
It is also the perfect tutorial opportunity for learning the basics of maps and mixins in SCSS.
In this tutorial you’ll learn:
- What a SCSS map is
- How to create a SCSS map
- How nested media queries work
- What a mixin is
- How to create a mixin
- What the @content placeholder is for
- How to get values from a map
- How to create a max-width media query mixin
- How to create a min-width media query mixin
- How to use your mixins
Q: Kevin, can you provide the code snippets?
No, I no longer provide code snippets for tutorials because it hampers your progress. The best way to learn is to force yourself to write it from scratch. Even if you’re copying it word for word, writing it helps your brain learn faster than copying and pasting.
***** NOTICE FOR ACSS USERS *****
You don’t need to do this manually. I’m about to release a tutorial showing how to hook into ACSS’s mixins and use them directly without creating and managing them yourself.
