using media queries with LESS

CSS supports multiple identical media queries, if you like, but CSS doesnt support nesting.

LESS, on the other hand, does support a few methods for nesting media queries. You can read about it here: http://lesscss.org/features/#extend-feature-scoping-extend-inside-media

Example:

@media screen {
  @media (min-width: 1023px) {
    .selector {
      color: blue;
    }
  }
}

Compiles to:

@media screen and (min-width: 1023px) {
  .selector {
    color: blue;
  }
}

LESS also supports nesting media queries below selectors like this:

footer {
  width: 100%;
  @media screen and (min-width: 1023px) {
    width: 768px;
  }
}

Compiles to:

footer {
  width: 100%;
}
@media screen and (min-width: 1023px) {
  footer {
    width: 768px;
  }
}

If this doesnt answer your question, then please post the relevant part of your LESS file(s).

Leave a Comment