Bagaimana untuk Memanjangkan Pemilih dalam Pertanyaan Media Sass?

Melanjutkan Pemilih dalam Pertanyaan Media dengan Sass

Soalan:

Seseorang ingin membenamkan . item dalam .item.compact apabila skrin mengecut, tetapi Sass melemparkan ralat apabila cuba melanjutkan menggunakan @media. Bagaimanakah seseorang boleh mencapai ini tanpa menghasilkan semula gaya?

Jawapan:

Malangnya, Sass melarang melanjutkan pemilih luar daripada dalam pertanyaan media. Sekatan itu memerlukan pendekatan alternatif:

1. Menggunakan Mixin:

Tentukan campuran boleh guna semula yang merangkumi gaya yang diingini. Kedua-dua dalam dan luar pertanyaan media, lanjutkan campuran ini:

@mixin compact {
    // Styles for compact items
}

%compact {
    @include compact;
}

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

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

2. Penambah Bersarang Dalam Pertanyaan Media:

Pendekatan ini membenarkan lanjutan pemilih yang ditakrifkan di luar pertanyaan media:

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

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

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

.bar {
  @extend %bar;
}

3. Menunggu Kemas Kini Sass:

Perbincangan mengenai sekatan ini sedang berjalan. Melaksanakan penyelesaian mungkin memerlukan perubahan dalam sintaks atau fungsi Sass.

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