使用 Sass 扩展媒体查询中的选择器
问题：
一个想要嵌入 .当屏幕收缩时，.item.compact 中的项目，但 Sass 在尝试使用 @media 扩展时会抛出错误。如何在不复制样式的情况下实现这一目标？
答案：
不幸的是，Sass 禁止从媒体查询中扩展外部选择器。该限制需要替代方法：
1。使用 Mixin：
定义一个可重用的 mixin 来封装所需的样式。在媒体查询内部和外部，扩展此 mixin：
@mixin compact {
// Styles for compact items
}
%compact {
@include compact;
}
// Usage
.item {
@extend %compact;
}
@media (max-width: 600px) {
.item {
@include compact;
}
}2。在媒体查询中嵌套扩展器：
此方法允许扩展在媒体查询之外定义的选择器：
%foo {
@media (min-width: 20em) {
color: red;
}
}
@media (min-width: 30em) {
%bar {
background: yellow;
}
}
// Usage
.foo {
@extend %foo;
}
.bar {
@extend %bar;
}3。等待 Sass 更新：
有关此限制的讨论正在进行中。实现解决方案可能需要更改 Sass 语法或功能。
以上是如何在 Sass 媒体查询中扩展选择器？的详细内容。更多信息请关注PHP中文网其他相关文章！
