LESS：如何在媒体查询中作为Mixin访问类？

Question

假设有这样一个声明（实际上是Bootstrap）：

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

在这个媒体查询内（它也有声明在外面），是否可以像其他类或mixin一样访问.navbar？我想在其他地方重用它的声明（好吧，不完全是这个，但你明白我的意思：-）），例如：

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

这个在LESS里面可能吗？

我看到非常相似的问题，不过这里的区别是我不能重构.navbar以使其在媒体查询之外，因为这是在Bootstrap的LESS文件中。 我明白LESS不关心媒体查询，因为它们只是另一种选择器类型；但是如何访问这些选择器内部的声明（我尝试了一些显而易见的方式，但都没有起作用）。

任何帮助都将不胜感激。

- Piedone

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

我非常确定这不是你想要做的事情。

然而，我认为由于@media不是选择器（它是一个查询字符串给浏览器），因此它不能作为LESS中的mixin或命名空间被访问，因此你无法以所需的方式访问其中的内容。

如果我错了，希望有人发布答案，但我不抱希望。

- ScottS

---

谢谢！是的，这不是我要找的。我希望有人能出现并展示一个隐藏的LESS宝石 :-). - Piedone

Answer 2

在使用LESS时，@media实际上被解释为LESS变量。如果它没有被声明为任何内容，则无法工作，但是您可以将其用作设置为具有字面字符串的本机CSS含义的LESS变量，因此，作为LESS变量，我将@media设置为以下内容：

@media: "@media";

那么我就可以更像使用本地CSS一样使用@media，例如：

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

- Philip Ashlock

---

“@media实际上被解释为LESS变量” - 这是不正确的。您的示例实际上是完全有效的LESS代码，可以按预期编译而无需任何@media: "@media";(您可以在此处进行测试http://less2css.org或者http://winless.org/online-less-compiler)。 - seven-phases-max