LESS Media Queries

How LESS Handles @media

@media is native CSS syntax, LESS doesn't reinvent it. What LESS adds is the ability to write a media query nested inside a selector's braces; the compiler automatically hoists it out to the top level of the compiled CSS.

Because @media conditions are just strings, LESS variables and interpolation can also be used to build a query dynamically, which becomes especially useful once breakpoints are stored as shared variables.

.sidebar {
  width: 100%;

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

Compiles to a top-level @media (min-width: 768px) { .sidebar { width: 260px; } } block.

Nested Media Query Syntax

.selector {
  property: value;

  @media (condition) {
    property: overridden-value;
  }
}

• Nested @media blocks can appear anywhere inside a selector's declarations.
• Multiple nested media queries can coexist inside the same selector for different breakpoints.
• LESS variables can be embedded into a media condition using an escaped string, ~"(min-width: @{bp})".
• Media queries can also be combined with logical operators exactly like plain CSS: and, commas for or, and not.

LESS Media Queries Cheatsheet

Common nested media query patterns.

Why Nesting Helps Maintainability

Writing responsive overrides directly next to their base declaration keeps a single component's full responsive behavior in one place, rather than scattered across separate top-level media query blocks at the bottom of a file.

.card {
  padding: 1rem;
  flex-direction: column;

  @media (min-width: 768px) {
    padding: 1.5rem;
    flex-direction: row;
  }
}

Variable-Driven Media Conditions

Storing a breakpoint value as a variable and embedding it into an escaped media condition string keeps every query referencing the same source of truth, this pattern is expanded fully in the Breakpoints lesson.

@bp-tablet: 768px;

.sidebar {
  @media ~"(min-width: @{bp-tablet})" {
    width: 260px;
  }
}

The tilde escape lets LESS interpolate @bp-tablet into the condition string without misparsing the parentheses.

Combining Multiple Media Conditions

Standard CSS media logic, and, comma-separated alternatives, and not, all work identically inside a LESS-nested @media block, since LESS passes the condition through largely as-is.

.hero {
  @media (min-width: 768px) and (orientation: landscape) {
    min-height: 480px;
  }
}

Common Mistakes

• Assuming a nested @media block stays physically nested in the compiled CSS; LESS always hoists it to the top level.
• Forgetting the tilde escape when embedding a variable into a media condition, causing a parse error on the parentheses.
• Writing the same breakpoint value as a raw number in multiple places instead of a shared variable.
• Nesting so many separate media queries inside one selector that the overall responsive behavior becomes hard to scan.

Key Takeaways

• @media in LESS is native CSS syntax; LESS only adds the ability to nest it inside a selector.
• Nested media queries are automatically hoisted to the top level of the compiled CSS.
• Variables can be embedded into a media condition using an escaped string with interpolation.
• Combine nested media queries with standard CSS logical operators exactly as you would in plain CSS.