Medienabfragen in SCSS - eine weitere bequeme Möglichkeit, @media Screen zu verwenden

Hallo!



Kürzlich war ich in einem in Angular erstellten Projekt mit dem Problem von Medienabfragen konfrontiert. Ich kann mich nicht genau erinnern, welche Einschränkungen mich dazu gebracht haben, ein Mixin zu schreiben, um meine Arbeit zu vereinfachen, aber ich möchte das Ergebnis wirklich teilen und Feedback erhalten. Ich habe viele andere ähnliche Beispiele getroffen, aber für die Arbeit ist es für mich klarer und bequemer, dieses spezielle zu verwenden.



Im Allgemeinen habe ich der Einfachheit halber die folgenden Anforderungen an mich selbst gestellt:

1. Bildschirmgrößen müssen separat gerendert werden, damit Sie das Verhalten global an einer Stelle ändern können (z. B. übertragen Sie anstelle von "320px" einfach "xs").
2. Diese Mischung mit Medienabfragen kann in mehrere Richtungen erfolgen (z. B. nicht immer nur mit maximaler Breite).
3. Mixin kann separat verwendet werden, indem die darin beschriebenen Klassen überschrieben oder im Hauptteil des übergeordneten Elements beschrieben werden und seine Eigenschaften überschrieben werden.

Definieren wir also alle Berechtigungen, die wir benötigen. Zum Beispiel:

$sizes: ("xs":320px, "sm":576px, "md":768px, "lg":992px, "xl":1200px);

Schreiben wir zunächst ein Mixin, das das gewünschte Bereichspräfix und die gewünschte Auflösung akzeptiert, unter denen wir begrenzt sind:

@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @media only screen and (#{$minmax}-width: $resolution) {
        @content;
      }
    }
  }
}

Kurz gesagt, wir übergeben den Namen der benötigten Bildschirmauflösung und suchen ihren Wert unter den zuvor in der Variablen $ size deklarierten. Nachdem wir es gefunden haben, ersetzen wir es zusammen mit dem übergebenen min oder max ($ minmax Variable).



Ein Anwendungsbeispiel, auch in einem anderen Mixin:

@mixin blocks-width {
  width: 400px;
  @include media("max", "md") {
    width: 100%;
  }
}

Aus diesem einfachen Beispiel erhalten wir ein Mixin, das die Blockbreite bei <768px von 400px auf 100% ändert. Die folgenden Beispiele sollten das gleiche Ergebnis liefern.



Ein Beispiel für die Verwendung innerhalb einer Klasse:

.blocks-width {
width: 400px;
  @include media("max", "md") {
    width: 100%;
  }
}

Ein Beispiel für die Verwendung als eigenständige Medienabfrage:

.blocks-width {
width: 400px;
}

@include media("max", "md") {
.blocks-width {
    width: 100%;
}
}

Was aber, wenn Sie eine Medienabfrage benötigen, einschließlich einer mit einem eindeutigen Bereich (geben Sie eine Auflösung an, innerhalb derer die Medienabfrage funktioniert)? Lassen Sie uns unser Mixin ein wenig erweitern.



Persönlich ist es für mich praktisch, die Auflösung wie folgt zu beschreiben: Wenn wir den md-Bereich benötigen, nehmen wir die Bildschirmgrößen zwischen sm und md. Wenn wir das Mixin so umschreiben möchten, dass wir nur eine Auflösung übergeben, müssen wir den vorherigen Wert aus der Liste finden. Da ich keine Methode gefunden habe, um dies schnell zu tun, musste ich eine Funktion schreiben:

@function getPreviousSize($currentSize) {
  $keys: map-keys($sizes);
  $index: index($keys, $currentSize)-1;
  $value: map-values($sizes);
  @return nth($value, $index);
}

Verwenden Sie, um zu überprüfen, wie es funktioniert debuggen::

@debug getPreviousSize('md');

Als nächstes unser leicht überarbeiteter Code:

@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @if ($minmax != "within") {
        @media only screen and (#{$minmax}-width: $resolution) {
          @content;
        }
      } @else {
        @if (index(map-keys($sizes), $media) > 1) {
          @media only screen and (min-width: getPreviousSize($media)+1) and (max-width: $resolution) {
            @content;
          }
        } @else {
          @media only screen and (max-width: $resolution) {
            @content;
          }
        }
      }
    }
  }
}

Die Logik ist dieselbe wie für die vorherige Funktionalität. Wenn Sie jedoch eine Medienabfrage nur im Bereich anwenden möchten, z. B. md, schreiben Sie beim Aufrufen des Mixins Folgendes:

@include media("within", "md") {
  .blocks-width {
    width: 100%;
  }
}

Danach sehen wir das folgende kompilierte CSS:

@media only screen and (max-width: 768px) and (min-width: 577px)
.blocks-width {
    width: 100%;
}

Wenn wir außerdem die kleinste Bildschirmgröße angeben (wir haben sie xs), zum Beispiel:

@include media("within", "xs") {
  .blocks-width {
    width: 100%;
  }
}

Dann erhalten wir einen Bereich von 0 bis zur entsprechenden kleinsten Auflösung:

@media only screen and (max-width: 320px)
.blocks-widthh {
    width: 100%;
}

Natürlich können Sie diese Medienabfragen in die andere Richtung umschreiben, aber ich persönlich bin es gewohnt, von mehr auf weniger zu gestalten.



Vielen Dank für Ihre Aufmerksamkeit!

UPD: Das Mixin wurde leicht korrigiert, damit sich Auflösungen in begrenzten Bereichen nicht überschneiden :) Vielen Dank für Ihre AufmerksamkeitE_STRICT