LESS：ミックスイン

Question

としてアクセスクラス内のメディアクエリは、このような宣言は（それが実際にブートストラップです）がありますと仮定します。

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

は、このメディアクエリー内.navbarにアクセスすることが可能です（それはまた外側の宣言を持っています）他のクラスやmixinと同じですか？例えば、私はどこか別の場所にその宣言を再利用したいと思います（まあ、ないまさにこの1しかし、あなたは:-)アイデアを得る）：

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

はLESSと、これは可能ですか？

ここでの違いは、これはブートストラップのLESSファイル内にあるので、私はメディアクエリ外に .navbarをリファクタリングすることができないということですが、私は、very similar questionを見てきました。私は帽子LESSがメディアクエリーに気にしないことを理解している。これらのセレクタの中で宣言にアクセスするにはどうすればよいですか（私はいくつかの明白な選択肢を試しましたがどちらもうまくいきませんでした

ご協力いただければ幸いです。

Answer 1

私はたとえば、あなたがから@media自体内を除いことができます任意の方法を認識していないよ：

は

これは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; 
} 

はこのCSSを作成し

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

私はfairlですあなたがしたいことがではないです。

しかし、@mediaはセレクタ（それはブラウザへのクエリ文字列）ではないため、mixinまたはLESSの名前空間としてアクセスすることはできません。あなたが望む方法ではアクセスできない。

私が間違っていたら、誰かが答えを投稿してくれることを願っていますが、私はそれを期待していません。

Answer 2

@mediaは、LESSを使用する場合、実際にはLESS変数として解釈されます。それが何かと宣言されていない場合は動作しませんが、それをLESS変数として使用して、ネイティブCSSの意味にリテラル文字列を設定することができます。 ：

@media: "@media"; 

その後、私は例えば、私はネイティブCSSで期待以上のように@media使用することができます。

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