Twitter bootstrap 大屏幕使用“.navbar fixed top”，小屏幕使用“.navbar static top”

我在我的网站上使用Bootstrap，我选择使用固定在屏幕顶部的导航栏在桌面浏览器上导航，那里有大量的屏幕可用空间。这是在引导过程中通过为我的navbar使用

.navbar固定顶部

类来完成的

在较小的屏幕上，尽管我更喜欢使用静态导航栏，它可以滚动页面的其余内容，因为这样可以在较小的设备上节省垂直屏幕的空间，因为这样的空间非常宝贵

当然，我转向了使用css媒体查询的明显方式：

#site-header
{
  @extend .navbar, .navbar-default;

  @media (max-width: $screen-xs-max) {
    @extend .navbar-static-top;
  }

  @media (min-width: $screen-sm-min) {
    @extend .navbar-fixed-top;
  }
}

不幸的是，这给了我错误信息：

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

根据错误消息，这似乎是SASS中一个非常刻意的限制。除了使用JavaScript动态应用类之外，还有其他解决方法吗

---

本质上，我的问题与类似，只是我想扩展一个在库（引导）中定义的类，所以我没有选择将

.navbar static top

和

.navbar fixed top

的定义转换为mixin或以任何方式更改其定义，正如目前对该问题的所有现有答案所建议的那样。

您可以在媒体查询中编写类并对其进行扩展。像这样的

#site-header {
  @extend .navbar, .navbar-default;
}

@media (max-width: 767px) {
  .navbar-static-top {
    position: static;
  }

  #site-header {
    @extend .navbar-static-top;
  }
}

@media (min-width: 768px) {
  .navbar-fixed-to-top {
    position: fixed;
    top: 0;
    right: 0;
  }

  #site-header {
    @extend .navbar-fixed-to-top;
  }
}

---

我不确定这在这种情况下是否有效，因为

.navbar fixed top

和

.navbar static top

的属性是由引导定义的，而不是由我定义的。我想我可以从库中复制属性并将它们粘贴到我自己的代码文件中，但这不会破坏像

@extend

这样的构造的目的吗？@cimmanon我的问题确实与此类似，但因为我希望扩展库提供的类（Bootstrap），答案中提出的建议“使用mixin”或“在媒体查询中定义类，而不是尝试在那里扩展它”的解决方案对我的情况没有多大帮助。所以我想这可能是一个不同的问题？事实上，这两种选择都不适用于你的情况，这是无关紧要的：这是唯一存在的选择。如果你不喜欢它们，我建议你向Sass（或Bootstrap）的维护者投诉。@cimmanon我不知道，我的直觉告诉我，如果一个问题的有效答案不能回答另一个问题，那么两个问题不可能真的重复。这种做法与IMO将问题标记为重复的做法背道而驰，这是为了帮助未来的访问者找到他们问题的答案。您认为我们需要多少问题才能解决

您可能不会从@media

错误中@extend一个外部选择器？你想扩展的选择器来自哪里并不重要（你写的，其他人写的，等等）：答案是一样的，永远都是一样的：你不能这样做（直到Sass本身改变允许这种行为）。@cimmanon Meta post here:我欢迎你对我的问题措辞的反馈（希望我没有遗漏任何重要的内容）。哦，如果你想在那里发布答案，请随意。Meta似乎是进行讨论的好地方。