如何在 Sass 媒體查詢中擴展選擇器？

使用Sass 擴充媒體查詢中的選擇器

問題：

問題：

問題：

問題：

問題：

@mixin compact {
    // Styles for compact items
}

%compact {
    @include compact;
}

// Usage
.item {
    @extend %compact;
}

@media (max-width: 600px) {
    .item {
        @include compact;
    }
}

一個想要一個想要嵌入.當螢幕收縮時，.item.compact 中的項目，但Sass 在嘗試使用@media 擴充時會拋出錯誤。如何在不複製樣式的情況下實現這一目標？

答案：

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

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

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

.bar {
  @extend %bar;
}

不幸的是，Sass 禁止從媒體查詢中擴展外部選擇器。此限制需要替代方法：

1。使用 Mixin：

定義一個可重複使用的 mixin 來封裝所需的樣式。在媒體查詢內部和外部，擴充此 mixin：2。在媒體查詢中嵌套擴展器：此方法允許擴展在媒體查詢之外定義的選擇器：3。等待 Sass 更新：有關此限制的討論正在進行中。實現解決方案可能需要更改 Sass 語法或功能。

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