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 可以做到这一点吗？

我见过very similar question，虽然这里的区别是我不能重构 .navbar 在媒体查询之外，因为它在 Bootstrap 的 LESS 文件中。我知道 LESS 不关心媒体查询，因为它们只是另一种选择器；但是如何访问这些选择器中的声明（我尝试了一些明显的但都没有成功）。

任何帮助将不胜感激。

Answer 1

除了@media 本身在中，我不知道有任何方法可以使用，例如：

这个少

@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 中的命名空间来访问，因此它的内容无法以您想要的方式访问。

如果我错了，我希望有人发布答案——但我没想到。

Answer 2

@media 在使用 LESS 时实际上被解释为 LESS 变量。如果它没有被声明为任何东西，那么它将不起作用，但您可以将其用作 LESS 变量，该变量设置为带有文字字符串的本机 CSS 含义，因此作为 LESS 变量，我将 @media 设置为这样：

@media: "@media";

然后我可以像使用原生 css 所期望的那样使用@media，例如：

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