Css 使用Sass从媒体查询中扩展选择器

我有一个item类和一个compact“modifier”类：

这很好。但是，我想添加一个

@media

查询，当屏幕足够小时，它会强制

.item

类紧凑

一想到这里，我就想这么做：

.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
  .item { @extend .item.compact; }
}

但这会产生以下错误：

您不能从@media内@extend外部选择器。你只能 @在同一指令中扩展选择器

我如何使用SASS实现这一点而不必使用复制/粘贴样式？

您可以重新构造吗

.compact { //compact-styles }
.item {}
.item.compact { @extend .compact } 

@media (max-width: 600px) {
    .item { @extend .compact; }
}

---

如果我正确理解了文档，应该可以。我认为您尝试的方法不起作用的原因是它在解析@extend时看不到.item.compact，但这是一个未知的猜测，所以请用一卡车盐来猜！）

简单的答案是：你不能，因为Sass不能（或不会）为它组成选择器。您不能在媒体查询内扩展媒体查询外的内容。如果它只是复制一份，而不是试图组合选择器，那当然是件好事。但事实并非如此，所以你不能

使用混合器 如果您打算在媒体查询内外重用代码块，并且仍然希望它能够扩展它，那么编写一个mixin和一个extend类：

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}

从外部扩展媒体查询中的选择器 这不会真正帮助您的用例，但它是另一个选项：

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}

等待Sass解除此限制（或自己修补） 关于这个问题有很多正在进行的讨论（除非您有一些有意义的补充：维护人员已经意识到用户需要这个功能，这只是一个如何实现它以及语法应该是什么的问题），否则请不要对这些线程做出贡献

---

我认为SASS/SCSS不支持媒体查询中的

@extend

指令

---

您可能需要使用mixin，尽管需要根据您的目标权衡代码膨胀

记录在案，以下是我如何通过只复制一次生成的样式来解决问题的：

// This is where the actual compact styles live
@mixin compact-mixin { /* ... */ }

// Include the compact mixin for items that are always compact
.item.compact { @include compact-mixin; }

// Here's the tricky part, due to how SASS handles extending
.item { ... }
// The following needs to be declared AFTER .item, else it'll
// be overridden by .item's NORMAL styles.
@media (max-width: 600px) {
  %compact { @include compact-mixin; }

  // Afterwards we can extend and
  // customize different item compact styles
  .item {
    @extend %compact;
    /* Other styles that override %compact */
  }
  // As shown below, we can extend the compact styles as many
  // times as we want without needing to re-extend
  // the compact mixin, thus avoiding generating duplicate css
  .item-alt {
    @extend %compact;
  }
}

---

这是我找到的最干净的部分解决方案。在可能的情况下，它利用@extend，并在媒体查询中返回到mixin

有关详细信息，请参阅本文，但要点是调用mixin“占位符”，然后决定是输出@extend还是@include

@include placeholder('clear') {
   clear: both;
   overflow: hidden;
}

.a {
    @include _(clear);
}
.b {
    @include _(clear);
}
.c {
    @include breakpoint(medium) {
      @include _(clear);
   }
}

---

最终，它可能并不比只使用mixin更好，这是目前公认的答案。

我使用断点，但这是相同的想法：

@mixin bp-small {
    @media only screen and (max-width: 30em) {
        @content;
    }

如何使用它：

.sidebar {
    width: 60%;
    float: left;
    @include bp-small {
        width: 100%;
        float: none;
    }
}

---

关于mixin，您可以在其中了解有关此选项的更多信息。

您是如何编译SASS的？从外部来看，使用JS还是某种服务器端组件？它是通过标准的

rails sass

gem编译的，使用sass v3.2.4似乎不推荐在@media querys内部扩展的功能，并将在3.3中取消：（阅读CSS指令中“对

@extend

的限制”的区域）如果我正确理解了这些信息，那可能就是问题的根源。我很想知道你发现了什么@这对你有用吗？您可以在媒体查询中使用扩展类吗？在Sass 3.2中，

%foo

是不必要的，

.foo

可以直接

@包括foo

。在我的例子中，我刚刚将%placeholder用于扩展外部媒体查询。然后，在媒体查询中，为我的选择器添加了扩展%占位符。我会看看讨论是否会带来一些便利。谢谢Cimmanon。仅供参考，这里有一个问题可以让您给出的示例正确运行：欢迎链接到解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及它为什么存在，然后引用你链接到的页面最相关的部分，以防目标页面不可用。

.sidebar {
    width: 60%;
    float: left;
    @include bp-small {
        width: 100%;
        float: none;
    }
}