Less.js: Gabungan kueri media bersarang yang tidak valid dengan kondisi "atau", saat variabel digunakan untuk kueri sub-media

Dibuat pada 20 Sep 2016  ·  5Komentar  ·  Sumber: less/less.js

Kueri media yang tidak valid dikompilasi saat menggunakan variabel yang berisi definisi kueri media dengan kondisi OR (baik dengan koma atau "atau"-kata kunci). Kueri media teratas harus ditambahkan ke setiap subkueri.

Lebih sedikit:

<strong i="7">@highdpi</strong>: ~"(-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx)";
.bg {
    <strong i="8">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        <strong i="9">@media</strong> <strong i="10">@highdpi</strong> {
            background: url([email protected]);
        }
    }
}

Keluaran:

<strong i="14">@media</strong> (max-width: 1000px) {
  .bg {
    background: url(bg-small.png);
  }
}
<strong i="15">@media</strong> (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {
  .bg {
    background: url([email protected]);
  }
}

Output yang diharapkan - "(max-width: 1000px) dan " sebelum setiap bagian yang dipisahkan koma:

[...]
<strong i="19">@media</strong> (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 1000px) and (min-device-pixel-ratio: 1.25), (max-width: 1000px) and (min-resolution: 1.25dppx) {
[...]

_Di sisi lain, ini dapat dikompilasi dengan baik, ketika tidak menggunakan variabel:_

.bg {
    <strong i="23">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        <strong i="24">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {
            background: url([email protected]);
        }
    }
}
consider closing feature request needs decision stale

Komentar yang paling membantu

Ini lebih merupakan permintaan fitur daripada bug. Less tidak seharusnya memahami apa yang ada di dalam ~"" ( di mana saja , bukan hanya untuk kueri media). Jadi diharapkan Less untuk tidak pernah tahu tentang koma atau simbol khusus lainnya di sana.

Secara teknis, kode seperti di atas ("daftar kueri media dalam string yang diloloskan") lebih seperti solusi quirk/sintaks lama daripada pernah dianggap sebagai kode yang tepat (sekali lagi karena ~"" itu sendiri). Di Kurang hari ini, pola yang tepat untuk mencapai hal yang sama akan menggunakan kumpulan aturan/mixin anonim/terpisah alih-alih "variabel nilai ajaib", misalnya:

.highdpi(@rules) {
    <strong i="10">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), 
           (min-device-pixel-ratio: 1.25), 
           (min-resolution: 1.25dppx) {
        @rules();
    }
}

.bg {
    <strong i="11">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        .highdpi({
            background: url([email protected]);
        });
    }
}

atau metode serupa.

Terkait dengan #1421 dan masalah/permintaan serupa.


Perhatikan bahwa bahkan sebagai permintaan fitur (jika diusulkan) fitur ini harus menggunakan sintaks yang berbeda, bukan ~"" , yaitu contoh tidak pernah seharusnya berfungsi seperti yang diharapkan di atas - jadi saya tidak menandai ini sebagai " permintaan fitur" (karena FR akan membutuhkan sedikit lebih banyak wawasan).

Menggabungkan ke # 1421 mungkin?

Semua 5 komentar

Ini lebih merupakan permintaan fitur daripada bug. Less tidak seharusnya memahami apa yang ada di dalam ~"" ( di mana saja , bukan hanya untuk kueri media). Jadi diharapkan Less untuk tidak pernah tahu tentang koma atau simbol khusus lainnya di sana.

Secara teknis, kode seperti di atas ("daftar kueri media dalam string yang diloloskan") lebih seperti solusi quirk/sintaks lama daripada pernah dianggap sebagai kode yang tepat (sekali lagi karena ~"" itu sendiri). Di Kurang hari ini, pola yang tepat untuk mencapai hal yang sama akan menggunakan kumpulan aturan/mixin anonim/terpisah alih-alih "variabel nilai ajaib", misalnya:

.highdpi(@rules) {
    <strong i="10">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), 
           (min-device-pixel-ratio: 1.25), 
           (min-resolution: 1.25dppx) {
        @rules();
    }
}

.bg {
    <strong i="11">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        .highdpi({
            background: url([email protected]);
        });
    }
}

atau metode serupa.

Terkait dengan #1421 dan masalah/permintaan serupa.


Perhatikan bahwa bahkan sebagai permintaan fitur (jika diusulkan) fitur ini harus menggunakan sintaks yang berbeda, bukan ~"" , yaitu contoh tidak pernah seharusnya berfungsi seperti yang diharapkan di atas - jadi saya tidak menandai ini sebagai " permintaan fitur" (karena FR akan membutuhkan sedikit lebih banyak wawasan).

Menggabungkan ke # 1421 mungkin?

@seven-phases-max terima kasih telah menyelesaikan ini. Saya akan mengubah mixin saya untuk menggunakan mixin ".highdpi" lain sebagai ganti variabel dengan string yang lolos.

@seven-phases-max Saya pikir ada dua masalah/permintaan fitur terpisah di sini, jadi tidak yakin apakah kita harus bergabung ke #1421 tanpa menentukannya.

  1. Biarkan pengurai Kurang menjadi lebih longgar dengan ekspresi dan daftar. Izinkan daftar dibuat dari nilai atau pemilih kueri media, misalnya. Sehingga pelepasan string tidak harus menjadi persyaratan saat ingin membuat kueri media menjadi variabel. (Yang merupakan kebutuhan umum.) Ini adalah #1421, dan contoh @media bisa jadi merupakan tambahan lain untuk masalah itu.
  2. Menggabungkan daftar nilai kueri media bersarang (tergantung pada #1 , tetapi harus memiliki pass/fail terpisah dari #1 . Meskipun telah melakukan itu #1 , #2 adalah langkah logis berikutnya. Jadi, saya pikir kita bisa melacaknya di #2964.

Referensi #3059 di sini, karena pada dasarnya masalah ini hampir sama. Yaitu pada dasarnya pertanyaannya adalah: "Bisakah kita melakukan reparsing fitur lengkap dari @media dan @supports , dll. dll. setelah variabel diganti dengan nilainya?" (Ini membutuhkan refactoring utama dari parser itu sendiri sehingga dapat digunakan pada string arbitrer pada saat yang berubah-ubah, atau menduplikasi kode parsing pada setiap Node tertentu dan fungsi eval/css-gen-nya).

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat