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.

score 3 · Accepted Answer · answered Apr 24 '13 at 19:41

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.

Thank you! Yes, this is not what I'm looking for. I do hope somebody shows up with a hidden LESS gem :-). — Piedone, Apr 25 '13 at 11:17

score -1 · Answer 2 · answered Dec 06 '13 at 18:25

-1

@media is actually interpreted as a LESS variable when using LESS. If it hasn't been declared as anything then it won't work, but you can use it as a LESS variable that is set to the native CSS meaning with a literal string, so as a LESS variable I have @media set like this:

@media: "@media";

then I can use @media more like I would expect with native css, eg:

.random-widget {
    height: 100px;    
    @media (min-width: @screen-sm) {         
        height: 300px;
    }  
}

answered Dec 06 '13 at 18:25

Philip Ashlock

226
2
6

"@media is actually interpreted as a LESS variable" - That's not correct. Your example is actually perfectly valid LESS code that compiles as expected without any `@media: "@media";`(you can test it [here](http://less2css.org) or [here](http://winless.org/online-less-compiler)). – seven-phases-max Dec 06 '13 at 19:57

LESS: access class inside media query as mixin

2 Answers2