XF 2.2 LESS: @media Queries Nested in Class

[Digital Jedi]

You're supposed to be able to nest @media queries in a class in LESS. Like so:

.class1 {
  width: 100%;

  @media screen and (min-width: 740px) {
    width: 50%;
  }
}

I haven't been able to get this to work in xF, though. Has anyone else tried this with any luck?

 

[Old Nick]

.class1 {
  width: 100%;

  @media (min-width: 740px) {
    width: 50%;
  }
}

?

 

[Digital Jedi]

.class1 {
  width: 100%;

  @media (min-width: 740px) {
    width: 50%;
  }
}

?

It's a thing: https://stackoverflow.com/questions/42167163/nesting-media-rules-in-element

 

[Old Nick]

Have you at least tried?
Your link is 6 years old...

 

[Digital Jedi]

That's...that's why I know it didn't work.

 

[Digital Jedi]

Have you at least tried?

Your link is 6 years old...

I mean, more recently W3 posted a draft talking about nesting selectors in plain ol' CSS.

CSS Nesting Module

I'm new to using LESS functionality, but I presumed this wasn't something that went away when CSS was talking about doing it as far back as 2019.

 

[Old Nick]

That's...that's why I know it didn't work.

Have you tried MY code?
It works, as described in your W3C link...



Or maybe i don't understand the purpose of this thread.

 

[Digital Jedi]

Well, I did say I haven't been able to get this to work. My nesting doesn't work as expected.

 

[Old Nick]

Maybe because you used a syntax that is at least 6 years old and if you had used the syntax recommended by W3C (your link) it would work... a bit like what I proposed to you in my first message...

 

[Digital Jedi]

Am I missing something? I don't see any difference between the syntax I posted and the one you shared. Other than you nesting a media query within a media query.

 

[Russ]

Your original CSS works fine. Did you create a custom CSS template by chance? It needs to be a .less template if so. Putting this into extra.less outputs the right CSS though.

.p-body-header {
  width: 100%;

  @media screen and (min-width: 740px) {
    width: 50%;
  }
}

 

[Digital Jedi]

Yes, it is a .less template in the Default Style. However I did just find out that I forgot to put the call in the Default Style template. With that said, it is in the CONTAINER template of the custom style. So even though I screwed that up, the .less template and the code to call it are in the style I've been testing it on. It just doesn't do anything for me. I'll keep trying.