twitter-bootstrap – LESS：在媒体查询中访问类作为mixin

发布时间：2020-12-17 20:42:48 所属栏目：安全来源：网络整理

导读：假设有一个像这样的声明(它实际上是Bootstrap)： @media screen and (min-width: 768px) { .navbar { padding-top: 0; }} 是否可以像访问其他类或mixin一样访问此媒体查询中的.navbar(它还有一个声明在它之外)？我想在其他地方重复使用它的声明(好吧,不完全

假设有一个像这样的声明(它实际上是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并不关心媒体查询,因为它们只是另一种选择器;但是如何在这些选择器中访问声明(我尝试了一些明显的但没有奏效).

任何帮助,将不胜感激.

解决方法

除了@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中的命名空间进行访问,因此其内容无法访问你想要的方式.

如果我错了,我希望有人发布一个答案 – 但我不期待它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!