Geek asks and answers

LESS: access class inside media request as mixin

Suppose there is such an declaration (this is Bootstrap itself):

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

Is it possible to access .navbar inside this media query (it also has an ad outside it) like any other class or mixin? I would like to reuse my ads somewhere else (well, not quite that, but you get the idea :-)), for example:

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

Is this possible with LESS?

I saw a very similar question , although the difference is that I cannot reorganize it .navbarwill be outside the media request, since it is in the Bootstrap LESS file. I understand that LESS does not need media queries because they are just another type of selector; but how can you access the ads inside these selectors (I tried some obvious ones but didn't work).

Any help would be appreciated.

+5
source share
2 answers

I do not know about any method other than myself @media, for example:

This is 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;
}

Creates this CSS

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

I am sure that this is not what you want to do.

, , @media ( ), mixin, LESS, .

, , - - .

+3

@media LESS- LESS. , , LESS-, CSS- , LESS @media,

@media: "@media";

@media , css css, :

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

More articles:


All Articles