Search code examples
cssless

using media queries with LESS

I've seen a lot of posts about nesting media queries in LESS so I dont want to repeat any of that or waste anyones time but my question is slightly different. I have a nested media query inside a .less file with this code:

@media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}

So that is on my login.less so my login page will be more responsive. I want to make another page responsive as well so in my aboutMe.less I also added the same code:

@media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}

but its not triggering at all. Can you not have two media queries of the same type in css? So I would need to make a .less file mediaqueries.less and only have one instance of this:

@media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}

and put all the sites code that I want that query to trigger in there, or is it possible to add the same query anywhere you want inside nested less files and im just doing something wrong?

Thanks!

Solution

  • 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).