using media queries with LESS

Question

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!

Answer 1

For media rules on less my recommendation is use Escaping.

Sample

@min768: (min-width: 768px);

.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}