与萨斯媒体查询内扩展选择(Extending selectors from within media

我有一个项目类和紧凑的“修饰”类：

.item { ... }
.item.compact { /* styles to make .item smaller */ }

这可以。 不过，我想补充一个@media查询强制.item类紧凑当屏幕足够小。

在第一个想到的，这就是我试图做的：

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

但是，这会生成以下错误：

您可能无法从@media内@extend外选择。 你只可以在同一指令中@extend选择。

我将如何完成，而不必诉诸复制/粘贴样式此使用SASS？

Answer 1:

简单的答案是：你不能因为萨斯不能（或不会）撰写选择它。 你不能成为一个媒体查询的内部和扩展的东西，是一个媒体查询之外。 这肯定会是很好，如果它仅仅需要，而不是试图撰写选择它的一个副本。 但事实并非如此，所以你不能。

Use a mixin

如果你有你要去的地方被重用的内部代码和媒体查询外的块和还希望它能够扩展它，然后写既是混入和扩展类的情况下：

@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;
}

等到萨斯解除此限制（或者自己修补它）

有许多关于这一问题正在进行的讨论（除非你有一些有意义的补充，请不要造成这些线程：维护者都已经意识到，用户希望此功能，它只是一个如何实现它什么问题，语法应该是）。

• https://github.com/sass/sass/issues/1050
• https://github.com/sass/sass/issues/456

Answer 2:

为了记录在案，这里是我最终只复制生成的样式一旦解决问题：

// 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;
  }
}

Answer 3:

我相信SASS / SCSS不支持@extend媒体查询的内部指令。 http://designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do/

您可能需要使用一个mixin代替，虽然代码膨胀需要对你的目标进行权衡。

Answer 4:

这是最干净的，局部的解决方案，我已经找到。 这需要@extend在可能的优势，并回落到内部媒体查询时混入。

跨媒体查询@extend指令在萨斯

看到这篇文章的全部细节，但要点是，你调用一个mixin“占位”那个然后决定是否输出@extend或@include。

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

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

最终比只用混入，这是目前公认的答案也未必好。

Answer 5:

我用的断点，但它是同样的想法：

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

如何使用它：

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

有一个文本约混入在这里你可以找到更多关于这个选项。

Answer 6:

你能否重组？

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

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

如果我理解正确的文件，应该工作。 我想你想不会的工作方式是，它没有看到.item.compact时，它的解析@extend的原因，但是这是一个无知的猜测，所以采取与盐的卡车装载！ :)

文章来源: Extending selectors from within media queries with Sass