Why Media query mixin patterns in SASS? - Purpose & Use Cases

The Big Idea

Discover how a small Sass trick can save you hours fixing responsive styles!

The Scenario

Imagine you are styling a website for phones, tablets, and desktops. You write separate CSS rules for each screen size by repeating the same media query code everywhere.

The Problem

Every time you want to change a breakpoint or add a new device size, you must find and update many places manually. This is slow, error-prone, and makes your stylesheets messy.

The Solution

Media query mixin patterns let you write the media query code once as a reusable block. Then you just call the mixin with different styles inside. This keeps your code clean and easy to update.

Before vs After

✗ Before

@media (max-width: 600px) {\n  .box {\n    font-size: 14px;\n  }\n}\n@media (max-width: 600px) {\n  .header {\n    padding: 10px;\n  }\n}

✓ After

@mixin phone {\n  @media (max-width: 600px) {\n    @content;\n  }\n}\n@include phone {\n  .box { font-size: 14px; }\n  .header { padding: 10px; }\n}

What It Enables

You can quickly apply consistent responsive styles and update breakpoints in one place, making your design adapt smoothly to all devices.

Real Life Example

A developer building a blog site uses media query mixins to easily adjust font sizes and layout for phones and tablets without repeating code or risking mistakes.

Key Takeaways

Writing media queries manually is repetitive and error-prone.

Mixin patterns let you reuse media query code cleanly.

This makes responsive design easier to maintain and update.