如何在 Sass 媒体查询中扩展选择器？

使用 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中文网其他相关文章！