MENO: classe di accesso all'interno media query come mixin

Question

Supponete che ci sia una dichiarazione del genere (è Bootstrap in realtà):

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

E 'possibile accedere a .navbar all'interno di questo media query (ha anche una dichiarazione esterni che) come qualsiasi altra classe o mixin? Mi piacerebbe ri-utilizzare le sue dichiarazioni da qualche altra parte (beh, non proprio questo, ma si ottiene l'idea :-)), ad es .:

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

Questo è possibile con meno?

Ho visto un very similar question, anche se la differenza qui è che non riesco a refactoring .navbar di essere al di fuori della media query poiché questo è nel file di MENO di Bootstrap. Capisco che a cappello LESS non interessano le richieste dei media perché sono solo un altro tipo di selettore; ma come puoi accedere alle dichiarazioni all'interno di questi selettori (ne ho provati alcuni ovvi ma nessuno dei due ha funzionato).

Qualsiasi aiuto sarebbe apprezzato.

Answer 1

Io non sono a conoscenza di alcun modo che è possibile se non da all'interno il @media stesso, ad esempio:

Questo MENO

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

.navbar { 
    padding: 20px; 
} 

Produce questo CSS

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

Sono fairl e certo che è non quello che vuoi fare.

Tuttavia, poiché lo @media non è esso stesso un selettore (è una stringa di query per il browser), non è possibile accedervi da solo come mixin o come spazio dei nomi in LESS e quindi i suoi contenuti sono inaccessibili nel modo in cui desideri.

Se mi sbaglio, spero che qualcuno dia una risposta altrimenti - ma non me lo aspetto.

Answer 2

@media viene in realtà interpretato come una variabile MENO quando si utilizza MENO. Se non è stato dichiarato come qualcosa, allora non funzionerà, ma puoi usarlo come variabile LESS che è impostato sul significato CSS nativo con una stringa letterale, quindi come variabile LESS ho @media impostato come questo :

@media: "@media"; 

quindi posso usare @media più come mi aspetterei con i CSS nativo, ad esempio:

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