从萨斯

Question

媒体查询内延伸选择我有一个项目类和紧凑的“修饰”类：

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

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

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

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

但这生成以下错误：

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

我将如何做到这一点使用SASS，而不必诉诸复制/粘贴样式？

Answer 1

简单的答案是：你不能因为萨斯不能（或不会）撰写选择它。您不能进入媒体查询并扩展媒体查询之外的内容。它肯定会很好，如果它只需要它的副本而不是试图编写选择器。但它并不如此，你不能。

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

和扩展类：

@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

你能否重组？

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

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

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

Answer 3

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

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

Answer 4

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

// 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 5

这是最干净的，局部的解决方案，我已经找到。它在可能的情况下利用@extend，并在内部媒体查询时回退到mixin。

Cross-Media Query @extend Directives in Sass

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

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

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

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