Sass Media Queries

How Sass Improves on Plain CSS Media Queries

Plain CSS requires writing a full media query block separately from the selector it affects, often far away in the file. Sass lets you nest a media query directly inside the selector's own rule, keeping related styles together and letting the compiler restructure the output correctly.

.sidebar {
  width: 100%;

  @media (min-width: 768px) {
    width: 300px;
  }
}

Compiles to .sidebar { width: 100%; } @media (min-width: 768px) { .sidebar { width: 300px; } }, restructured automatically.

Media Query Syntax in Sass

@media (min-width: 768px) { ... }
@media $variable { ... }
@media (min-width: 768px) and (max-width: 1199px) { ... }

• Media queries can be nested inside any selector's block.
• A Sass variable can be used directly as (or inside) a media query condition.
• and, or, and comma-separated queries all work exactly as in plain CSS.
• Interpolation (#{}) is needed only when building a condition from a partial value, not when using a full variable directly.

Sass Media Queries Cheatsheet

Common media query patterns and how Sass simplifies them.

Nesting Media Queries Inside Components

Keeping a media query nested inside its component's own rule is one of the biggest ergonomic wins Sass offers over plain CSS, there is no need to scroll to a separate part of the file to see how a component behaves at a given breakpoint.

.nav {
  display: block;

  @media (min-width: 768px) {
    display: flex;
    justify-content: space-between;
  }
}

Combining Multiple Conditions

Sass media queries support the exact same combinators as plain CSS, and for combining conditions, and commas for an "or" relationship between multiple full queries.

.banner {
  @media (min-width: 768px) and (max-width: 1199px) {
    // only tablets and smaller desktops
  }

  @media (prefers-reduced-motion: reduce), (max-width: 480px) {
    transition: none;
  }
}

Using Sass Variables in Query Conditions

A Sass variable can be dropped directly into a media query condition without any interpolation, as long as it represents the entire value being compared, this is what makes the shared breakpoint map approach from the Responsive Architecture lesson possible.

$breakpoint-md: 768px;

.card {
  @media (min-width: $breakpoint-md) {
    display: flex;
  }
}

Common Mistakes

• Writing media queries far away from the component they affect instead of taking advantage of Sass's nesting support.
• Adding unnecessary interpolation (#{$bp}) around a variable that's already a complete value.
• Mixing min-width and max-width queries inconsistently within the same component.
• Repeating the same raw pixel value across many components instead of centralizing it in a shared breakpoint map.

Key Takeaways

• Sass lets you nest @media directly inside the selector it affects, and restructures the output correctly.
• Media queries support the same combinators (and, commas) as plain CSS.
• A Sass variable can be used directly inside a query condition without interpolation.
• Keeping media queries nested inside components avoids scattering related responsive logic across a file.