Bagaimanakah Anda Boleh Memanjangkan Pemilih Dalam Pertanyaan Media dalam Sass?

Memperluaskan Pemilih Menggunakan Pertanyaan Media dalam Sass

Apabila bekerja dengan Sass, anda selalunya perlu melanjutkan pemilih dari dalam pertanyaan media. Ini boleh berguna untuk menggunakan gaya yang berbeza pada elemen berdasarkan saiz atau orientasinya. Walau bagaimanapun, Sass mempunyai had apabila anda tidak boleh melanjutkan pemilih luar dari dalam pertanyaan media.

Dalam contoh kod yang disediakan:

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

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

Pendekatan ini mengakibatkan ralat kerana Sass tidak boleh mengarang pemilih untuk anda. Secara khususnya, anda tidak boleh berada di dalam pertanyaan media dan memanjangkan sesuatu yang berada di luarnya.

Pendekatan Alternatif

Disebabkan pengehadan ini, anda mempunyai beberapa alternatif:

Menggunakan Mixin

Buat campuran dan kelas lanjutan untuk menggunakan semula kod dalam dan luar pertanyaan media:

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

%foo {
    @include foo;
}

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

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

Melanjutkan Pemilih dari Luar

Walaupun tidak terpakai secara langsung pada kes penggunaan yang diberikan, kaedah ini membolehkan anda memanjangkan pemilih dalam pertanyaan media daripada di luar:

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

Perbincangan Berterusan

Terdapat perbincangan aktif mengenai pengehadan ini dalam komuniti Sass. Pengguna telah menyatakan keinginan untuk fungsi ini, dan penyelenggara sedang mempertimbangkan cara untuk melaksanakannya dengan berkesan. Bagaimanapun, tiada penyelesaian muktamad dicapai lagi.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Memanjangkan Pemilih Dalam Pertanyaan Media dalam Sass?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!