LESS：媒體查詢裏面的混入

Question

假設有這樣一個聲明的訪問級別（這是引導實際上）：

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

是否有可能訪問該媒體查詢裏面.navbar（它也有一個聲明外側它）像任何其他類或mixin？我想別的地方重新使用它的聲明（當然，不完全是這一個，但你的想法:-)），例如：

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

這可能與少？

我看過一個very similar question，雖然這裏的區別是我不能重構 .navbar在媒體查詢之外，因爲這是在Bootstrap的LESS文件中。我理解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 y確定那是而不是你想做什麼。然而，我相信由於@media本身並不是一個選擇器（它是瀏覽器的查詢字符串），因此它不能作爲混合或作爲LESS中的名稱空間訪問自身，因此其內容無法以您想要的方式進入。

如果我錯了，我希望有人發佈一個答案，否則 - 但我不期待它。

Answer 2

@media在使用LESS時實際上被解釋爲LESS變量。如果它沒有被聲明爲任何東西，那麼它將不起作用，但你可以將它用作一個LESS變量，它被設置爲本地CSS含義和一個文字字符串，所以作爲一個LESS變量，我有@media這樣設置：

@media: "@media"; 

然後我可以使用@media更像我希望與本地的CSS，如：

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