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