如何在 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

使用Mixins

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

%foo {
    @include foo;
}

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

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

使用Mixins

<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>

使用Mixins

建立一個mixin 和一個擴充類別以在媒體查詢內部和外部重用程式碼：

擴充選擇器從外部雖然不能直接適用於給定的用例，但此方法允許您從外部擴展媒體查詢中的選擇器：正在進行的討論Sass 社區中有關於此限制的活躍討論。使用者已經表達了對此功能的渴望，維護人員正在考慮有效實現它的方法。但目前尚未達成明確的解決方案。

以上是如何在 Sass 媒體查詢中擴展選擇器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！