Wie können Sie Selektoren innerhalb von Medienabfragen in Sass erweitern?

Selektoren mithilfe von Medienabfragen in Sass erweitern

Bei der Arbeit mit Sass müssen Sie häufig Selektoren innerhalb von Medienabfragen erweitern. Dies kann nützlich sein, um unterschiedliche Stile auf Elemente basierend auf ihrer Größe oder Ausrichtung anzuwenden. Sass weist jedoch eine Einschränkung auf, da Sie einen äußeren Selektor nicht innerhalb einer Medienabfrage erweitern können.

Im bereitgestellten Codebeispiel:

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

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

Dieser Ansatz führt zu einem Fehler, da Sass nicht komponieren kann der Selektor für Sie. Insbesondere können Sie sich nicht innerhalb einer Medienabfrage befinden und etwas erweitern, das sich außerhalb dieser befindet.

Alternative Ansätze

Aufgrund dieser Einschränkung haben Sie mehrere Alternativen:

Mixins verwenden

Erstellen Sie ein Mixin und eine Erweiterungsklasse, um Code innerhalb und außerhalb von Medienabfragen wiederzuverwenden:

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

%foo {
    @include foo;
}

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

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

Erweitern des Selektors von außen

Obwohl diese Methode nicht direkt auf den gegebenen Anwendungsfall anwendbar ist, können Sie einen Selektor innerhalb einer Medienabfrage von außen erweitern:

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

Laufende Diskussionen

In der Sass-Community gibt es aktive Diskussionen zu dieser Einschränkung. Benutzer haben den Wunsch nach dieser Funktionalität geäußert und die Betreuer erwägen Möglichkeiten, sie effektiv zu implementieren. Es wurde jedoch noch keine endgültige Lösung gefunden.

Das obige ist der detaillierte Inhalt vonWie können Sie Selektoren innerhalb von Medienabfragen in Sass erweitern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!