Uploaded May 2022 | Updated September 2026, 7 minutes ago

---

A short guide on nesting media queries. You'll learn how to nest media queries, how to combine @media with @supports, and how to use CSS Custom Properties (variables) in media query features using @custom-media.

🔗 Demo
codepen.io/ZoranJambor/pen/RwQpOYX/9abb2cbe36677b161ff7c7f15ba89d9f

📚 Resources
PostCSS Custom Media Plugin: github.com/postcss/postcss-custom-media
Custom Media Queries Spec: drafts.csswg.org/mediaqueries-5/#custom-mq
Media Queries MDN Entry: developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

📖 Chapters
00:00 Intro
00:31 Nesting Media Queries
01:27 Nesting Media Queries within selectors in Sass/SCSS
02:18 Combining Media Queries and @support at-rules
03:29 Using variables in media query features using @custom-media
05:39 Conclusion

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #sass