我有一个Item类和一个紧凑的"修改器"类:
.item { ... }
.item.compact { /* styles to make .item smaller */ }
这个不错.不过，我想添加一个@media查询，当屏幕足够小时，它会强制.item类紧凑.
一开始我就这么想:
.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
.item { @extend .item.compact; }
}
但这会生成以下错误:
您不能从@media内@extend外部 Select 器.你只能
我如何使用SASS来实现这一点，而不必求助于复制/粘贴样式？
简单的答案是:你不能，因为Sass不能(或不会)为它组成 Select 器.你不能在媒体查询的内部扩展媒体查询之外的内容.如果它只是复制一份，而不是试图组合 Select 器，那当然是件好事.但事实并非如此，所以你不能.
如果您打算在媒体查询内外重用代码块，但仍希望它能够扩展它，那么请编写一个mixin和一个extend类:
@mixin foo {
// do stuff
}
%foo {
@include foo;
}
// usage
.foo {
@extend %foo;
}
@media (min-width: 30em) {
.bar {
@include foo;
}
}
这不会真正帮助您的用例，但它是另一种 Select :
%foo {
@media (min-width: 20em) {
color: red;
}
}
@media (min-width: 30em) {
%bar {
background: yellow;
}
}
// usage
.foo {
@extend %foo;
}
.bar {
@extend %bar;
}
关于这个问题有许多正在进行的讨论(除非您有什么有意义的东西要添加，否则请不要为这些主题做贡献:维护人员已经意识到用户需要这个功能，这只是一个如何实现它以及语法应该是什么的问题).