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

我不知道除{em> @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本身不是一个选择器（它是浏览器的查询字符串），因此无法将其自身作为mixin或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;
    }  
}

LESS：在媒体查询中访问类作为mixin

2 个答案: