Wie erweitere ich Selektoren in Sass Media-Abfragen?

Selektoren in Medienabfragen mit Sass erweitern

Frage:

Man möchte einbetten. item innerhalb von .item.compact, wenn sich der Bildschirm zusammenzieht, aber Sass gibt einen Fehler aus, wenn versucht wird, es mit @media zu erweitern. Wie kann man dies erreichen, ohne Stile zu reproduzieren?

Antwort:

Leider verbietet Sass die Erweiterung äußerer Selektoren innerhalb von Medienabfragen. Die Einschränkung erfordert alternative Vorgehensweisen:

1. Verwenden eines Mixins:

Definieren Sie ein wiederverwendbares Mixin, das die gewünschten Stile kapselt. Erweitern Sie diesen Mix sowohl innerhalb als auch außerhalb von Medienabfragen:

@mixin compact {
    // Styles for compact items
}

%compact {
    @include compact;
}

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

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

2. Nesting-Extender innerhalb einer Medienabfrage:

Dieser Ansatz ermöglicht die Erweiterung von Selektoren, die außerhalb von Medienabfragen definiert sind:

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

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

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

.bar {
  @extend %bar;
}

3. Warten auf Sass-Update:

Die Diskussionen über diese Einschränkung dauern an. Die Implementierung einer Lösung erfordert möglicherweise eine Änderung der Sass-Syntax oder -Funktionalität.

Das obige ist der detaillierte Inhalt vonWie erweitere ich Selektoren in Sass Media-Abfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!