SCSS - 用于多个媒体查询的扩展选择器答案

【问题标题】：SCSS - Extend selector that is used in multiple media queriesSCSS - 用于多个媒体查询的扩展选择器
【发布时间】：2017-04-21 10:52:21
【问题描述】：

这是为 SCSS 专业人士准备的。我想在媒体查询中扩展选择器。我没有“离开”范围，选择器和我扩展的行都在同一个媒体查询中。

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

我不知道我解释得好不好，但你可能会从我的代码中得到它：

部分文件_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 外部选择器。您只能在同一指令中 @extend 选择器。来自 _desktop.scss 第 8 行的“@extend .font-family”

我知道您无法从 @media 中扩展外部选择器，但这不是我在这里想要做的。

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

【问题讨论】：

标签： css responsive-design sass

【解决方案1】：

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

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

  .font-family, body {
    @extend %font-family
  }

【讨论】：

【解决方案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;
  }
}

【讨论】：