Question

这是SCSS专业人士的一个。我想在媒体查询中扩展选择器。我不是＆＃34;离开＆＃34;范围，选择器和我扩展的行都在同一个媒体查询中。

但是，我使用我想要在另一个媒体查询中扩展的选择器，当我扩展它时会给我一个错误。

我不知道我是否解释得很好，但你可以从我的代码中得到它：

部分文件_tablet.scss

@media (min-width: 769px) {

  .font-family {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
  }

  body {
    @extend .font-family;
  }

}

部分文件_desktop.scss

@media (min-width: 992px) {

  .font-family {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
  }

  body {
    @extend .font-family;
  }

}

这给了我以下错误：

你可能不会在@media中扩展外部选择器。您只能在同一指令中@extend选择器。来自＆＃34; @extend .font-family＆＃34;在_desktop.scss的第8行

我知道你不能在@media范围内扩展外部选择器，但这不是我在这里尝试做的事情。

当我离开上述文件之一时，它可以正常工作。所以SASS认为我想从其他媒体查询中选择一个选择器，我不知道。我在这里做错了吗？如何扩展在多个媒体查询中使用的选择器？

Answer 1

通过扩展父（占位符）选择器来尝试继承。您可以在此link中阅读更多内容。

loadFilterDefaults: true

Answer 2

您可以在媒体查询之外移动您的正文声明，即使它扩展的内容仅存在于媒体查询中。

例如，这个：

body {
  @extend .font-family;
}
@media (min-width: 769px) {
  .font-family {
    font-family: Helvetica, Arial, sans-serif;
  }
}
@media (min-width: 888px) {
  .font-family {
    font-family: Arial, sans-serif;
  }
}

将编译为：

@media (min-width: 769px) {
  .font-family, body {
    font-family: Helvetica, Arial, sans-serif;
  }
}
@media (min-width: 888px) {
  .font-family, body {
    font-family: Arial, sans-serif;
  }
}

SCSS - 在多个媒体查询中使用的扩展选择器

2 个答案: