LESS: access class inside media query as mixin

Question

Suppose there's a declaration like this (it's Bootstrap actually):

@media screen and (min-width: 768px) {
  .navbar {
    padding-top: 0;
  }
}

Is it possible to access .navbar inside this media query (it also has a declaration outsides it) as any other class or mixin? I'd like to re-use its declarations somewhere else (well, not exactly this one but you get the idea :-)), e.g.:

.left-nav {
    .navbar; // Use the one from the media query here.
}

Is this possible with LESS?

I've seen a very similar question, although the difference here is that I can't refactor .navbar to be outside the media query since this is in Bootstrap's LESS file. I understand hat LESS doesn't care about media queries because they are just another type of selector; but how can you access declarations inside these selectors (I tried some obvious ones but neither worked).

Any help would be appreciated.

Answer 1

I'm not aware of any way that you can except from within the @media itself, for example:

This LESS

@media screen and (min-width: 768px) {
  .navbar {
    padding-top: 0;
  }
  .left-nav {
    .navbar; // Use the one from the media query here.
  }
}

.navbar {
  padding: 20px;
}

Produces this CSS

@media screen and (min-width: 768px) {
  .navbar {
    padding-top: 0;
  }
  .left-nav {
    padding-top: 0;
  }
}
.navbar {
  padding: 20px;
}

I'm fairly certain that is not what you are wanting to do.

However, I believe that since the @media is not itself a selector (it is a query string to the browser), then it cannot be accessed of itself either as a mixin or as a namespace in LESS, and therefore its contents are inaccessible in the way you desire.

If I'm wrong, I hope someone posts an answer otherwise--but I'm not expecting it.