我有一个项目类和一个紧凑的“修饰符”类：
.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来完成此操作，而无需使用复制/粘贴样式？
解决方法
简单的答案是：你不能因为Sass不能(或不会)为它组合选择器。您不能进入媒体查询，并扩展媒体查询外的内容。它肯定会很好，如果它只是拿一个它的副本，而不是试图组成选择器。但是这不是你不能的。
使用mixin
如果您有一种情况，您将要在媒体查询内外重用一段代码，并且仍然希望能够扩展它，那么请写一个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提升这个限制(或者自己修补)
有一些正在进行的关于这个问题的讨论(请不要为这些线程做贡献，除非你有一些有意义的补充：维护者已经意识到用户希望这个功能，这只是一个如何实现它的问题，语法应该是)。
> https://github.com/sass/sass/issues/1050
> https://github.com/sass/sass/issues/456
