5

假设有这样的声明（实际上是 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 不关心媒体查询，因为它们只是另一种类型的选择器；但是如何访问这些选择器中的声明（我尝试了一些明显的选择器，但都没有奏效）。

任何帮助，将不胜感激。

4

2 回答 2

3

我不知道除了从自身内部之外的任何方式，@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它本身不是一个选择器（它是浏览器的查询字符串），因此它本身不能作为一个 mixin 或作为 LESS 中的命名空间来访问，因此它的内容是无法访问的你渴望。

如果我错了，我希望有人发布答案——但我并不期待它。

于 2013-04-24T19:41:24.390 回答
-1

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

@media: "@media";

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

.random-widget {
    height: 100px;    
    @media (min-width: @screen-sm) {         
        height: 300px;
    }  
}
于 2013-12-06T18:25:43.993 回答