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!

Martin · Accepted Answer · 2014-02-22 09:35:31Z

33

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

answered Feb 22, 2014 at 9:35

Martin

2,3202 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mike Over a year ago

It seems the nested media query started working the other day. I think I had messed up css somewhere and when I refactored a bunch of stuff the media query started working. Thanks for the info this is a great reference for me!

DexieTheSheep · Accepted Answer · 2023-11-20 21:36:43Z

0

For media rules on less my recommendation is use Escaping.

Sample:

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

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

edited Nov 20, 2023 at 21:36

DexieTheSheep

4581 gold badge7 silver badges16 bronze badges

answered Feb 23, 2022 at 21:41

Daniel De León

13.8k5 gold badges93 silver badges74 bronze badges

1 Comment

patrick Over a year ago

this doesn't work, the second colon will fale some LESS compilers

Collectives™ on Stack Overflow

using media queries with LESS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related