Kueri media di SCSS adalah cara lain yang nyaman untuk menggunakan layar @media

Halo!



Baru-baru ini saya menghadapi masalah kueri media dalam proyek yang dibangun di Angular. Saya tidak ingat persis batasan apa yang membuat saya menulis mixin untuk menyederhanakan pekerjaan saya, tetapi saya sangat ingin membagikan hasilnya dan mendapatkan masukan. Saya bertemu banyak contoh serupa lainnya, tetapi untuk pekerjaan saya, lebih jelas dan lebih nyaman bagi saya untuk menggunakan yang ini.



Secara umum, untuk kenyamanan, saya membuat persyaratan berikut untuk diri saya sendiri:

1. Ukuran layar harus ditampilkan secara terpisah, sehingga Anda dapat mengubah perilaku secara global di satu tempat (misalnya, alih-alih "320px", cukup kirimkan "xs").
2. Mixin dengan kueri media ini bisa berada di lebih dari satu arah (misalnya, tidak selalu hanya lebar-maksimal).
3. Mixin dapat digunakan secara terpisah, menimpa kelas yang dijelaskan di dalamnya, atau dijelaskan di badan induk, menimpa propertinya.

Jadi mari kita tentukan izin yang kita butuhkan. Misalnya:

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

Pertama, mari kita tulis mixin yang akan menerima prefiks dan resolusi kisaran yang diinginkan, di mana kita dibatasi:

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

Singkatnya, kami meneruskan nama resolusi layar yang kami butuhkan, mencari nilainya di antara yang sebelumnya dideklarasikan dalam variabel $ ukuran. Setelah kami menemukannya, kami menggantinya bersama dengan min atau max yang dilewati (variabel $ minmax).



Contoh penggunaan, termasuk di mixin lain:

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

Dari contoh sederhana ini kita akan mendapatkan mixin yang mengubah lebar blok pada <768px dari 400px menjadi 100%. Contoh berikut akan memberikan hasil yang sama.



Contoh penggunaan di dalam kelas:

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

Contoh penggunaan sebagai kueri media yang berdiri sendiri:

.blocks-width {
width: 400px;
}

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

Tetapi bagaimana jika Anda memerlukan kueri media, termasuk kueri dengan rentang yang jelas (tentukan satu resolusi di mana kueri media akan berfungsi)? Mari kita kembangkan mixin kita sedikit.



Secara pribadi, akan lebih mudah bagi saya untuk menjelaskan resolusi sebagai berikut - jika kita memerlukan kisaran md, maka kita ambil ukuran layar antara sm dan md. Jika kita ingin menulis ulang mixin sehingga hanya memberikan satu resolusi, maka kita harus mencari nilai sebelumnya dari daftar. Karena saya tidak menemukan metode apa pun untuk melakukan ini dengan cepat, saya harus menulis sebuah fungsi:

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

Untuk memeriksa cara kerjanya, gunakan debug:

@debug getPreviousSize('md');

Selanjutnya, kode yang sedikit diulang kami:

@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;
          }
        }
      }
    }
  }
}

Logikanya sama dengan fungsi sebelumnya. Namun, jika Anda ingin menerapkan kueri media hanya dalam rentang tersebut, misalnya, md, tulis yang berikut saat memanggil mixin:

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

Setelah itu kita akan melihat css yang telah di-compile berikut ini:

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

Selain itu, jika kami menentukan ukuran layar terkecil (kami memilikinya xs), misalnya:

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

Kemudian kami mendapatkan rentang dari 0 hingga resolusi terkecil yang sesuai:

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

Biasanya, Anda dapat menulis ulang kueri media ini ke arah lain, tetapi secara pribadi, saya terbiasa mengatur huruf dari yang lebih besar ke yang lebih kecil.



Terima kasih atas perhatian Anda!

UPD: mixin telah sedikit diperbaiki sehingga resolusi dalam rentang terbatas tidak tumpang tindih :) Terima kasih atas perhatian AndaE_STRICT