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

在 Sass 中使用媒体查询扩展选择器

使用 Sass 时，您经常需要从媒体查询中扩展选择器。这对于根据元素的大小或方向应用不同的样式非常有用。但是，Sass 有一个限制，您无法从媒体查询中扩展外部选择器。

在提供的代码示例中：

<code class="scss">.item { ... }
.item.compact { /* styles to make .item smaller */ }

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

此方法会导致错误，因为 Sass 无法组合适合您的选择器。具体来说，您不能在媒体查询内部扩展其外部的内容。

替代方法

由于此限制，您有多种替代方法：

使用 Mixins

创建一个 mixin 和一个扩展类以在媒体查询内部和外部重用代码：

<code class="scss">@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}</code>

扩展选择器从外部

虽然不能直接适用于给定的用例，但此方法允许您从外部扩展媒体查询中的选择器：

<code class="scss">%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}</code>

正在进行的讨论

Sass 社区中有关于此限制的活跃讨论。用户已经表达了对此功能的渴望，维护人员正在考虑有效实现它的方法。但目前尚未达成明确的解决方案。

以上是如何在 Sass 媒体查询中扩展选择器？的详细内容。更多信息请关注PHP中文网其他相关文章！