Less.js: Kueri media grup

Bagaimana Anda melakukannya tanpa berpotensi mengubah makna dengan mengatur ulang pernyataan?

Saya tidak berpikir maknanya bisa diubah. Ini akan sama persis dengan menciutkan tag redundan normal. Sebagai contoh:

body {
    background: white;
}

body {
    padding: 0;
    margin: 0;
}

Akan diciutkan menjadi:

body {
    background: white;
    padding: 0;
    margin: 0;
}

Ini bahkan lebih terjadi dengan kueri media karena mereka adalah pemilih tingkat atas khusus yang bertindak sebagai lapisan kontrol di atas pemilih elemen normal. Pada dasarnya, mereka hanya memiliki satu arti dan tidak terpengaruh oleh sisa css dalam file.

Selanjutnya, less sudah mempertahankan urutan kueri media yang digelembungkan, itu hanya membuat banyak penyeleksi yang berlebihan untuk kueri yang sama persis. Jika mereka dapat disangga dan ditulis ke satu kueri di akhir pemrosesan, itu akan jauh lebih rapi dan menghasilkan keluaran css yang lebih kecil.

Apa aturan seputar kompleksitas pemilih di dalam kueri media? lakukan
pertanyaan meningkatkan kompleksitas dan menimpa pemesanan apa pun? Bisakah Anda menunjuk ke mana saja?
spesifikasi?

Pada dasarnya, ya. Pemilih media seperti pernyataan IF yang membungkus aturan gaya normal dan hanya berlaku jika kondisi kueri terpenuhi. Misalnya, jika lebar browser kurang dari jumlah piksel tertentu, aturan dalam kueri diaktifkan dan mengesampingkan aturan yang ada.

Jadi memiliki banyak kueri identik dengan satu gaya masing-masing akan identik secara fungsional dengan satu kueri dengan semua gaya di dalamnya. Selama pertanyaannya sama.

Berikut beberapa dokumentasi dari Mozilla

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

yang saya maksud adalah dalam contoh ini .. div menjadi merah - artinya memesan ulang kueri media (keduanya untuk layar) akan mengubah arti css

<strong i="6">@media</strong> screen {
    div {
        background-color: green;
    }
}

div {
     background-color: red;
}

<strong i="7">@media</strong> screen {
    div.pink {
        background-color: pink;
    }
}

Seharusnya hanya digabungkan jika aturan mengikuti satu sama lain secara langsung.

yang tidak mereka lakukan dalam contoh asli @Soviut , membuat permintaan fitur ini untuk penggunaan terbatas di IMO

Saya setuju, tetapi saya tidak melihat bagaimana ini akan berlaku untuk kueri media yang digelembungkan? Ingat, kueri yang digelembungkan adalah sedikit gula sintaksis; Anda biasanya tidak dapat menyematkan kueri media di dalam pemilih lain. Jadi dapat diasumsikan dengan aman bahwa setiap kali Anda menemukan kueri yang menggelegak untuk mengelompokkannya dengan kueri yang menggelegak yang identik sesuai urutannya.

Jika Anda memiliki dua kueri media gelembung di samping satu sama lain yang dapat digabungkan, saya pikir akan sangat jelas untuk melakukannya dalam waktu yang lebih singkat .. dapatkah Anda memberikan contoh aktual di mana akan aman untuk menggabungkan kueri media dan masuk akal untuk menjaga mereka terpisah dalam waktu singkat?

Saat berurusan dengan gambar retina, kami telah membungkus kueri media yang kompleks di dalam mixin dan membuat mixin sprite, jadi kami memiliki ini di semua tempat... ini meningkatkan CSS keluaran tetapi lebih dapat dipertahankan.

Misalnya, inilah mixin sprite kami:

.sprite(<strong i="7">@spritePath</strong>, <strong i="8">@hdpiPath</strong>, <strong i="9">@x</strong>, <strong i="10">@y</strong>, <strong i="11">@size</strong>: auto) {
    background-image: url(@spritePath);  
    background-repeat: no-repeat;
    background-position: -1 * <strong i="12">@x</strong> -1 * @y; // Negativize the value
    .background-size(@size);
    <strong i="13">@media</strong> <strong i="14">@mediaRetina</strong> {
        background-image: url(@hdpiPath);
    }
}

Dimana @mediaRetina adalah:

<strong i="19">@mediaRetina</strong>: ~"only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4/3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx)";

Kemudian di bawah, kami membuat lebih banyak mixin untuk membungkus setiap elemen sprite seperti ini:

#sprite
{
    .header-logo()
    {
        .sprite(<strong i="23">@globalSpritePath</strong>, <strong i="24">@global2XSpritePath</strong>, 22px, 0, 384px 288px);
        width: 94px;
        height: 59px;
    }
}

Dan gunakan di file KURANG lainnya seperti ini:

h1 {
    width: 94px;
    height: 59px;

    a {
        #sprite > .header-logo();
    }

}

Dalam hal ini, CSS yang dihasilkan terlihat seperti:

h1 a {
  background-image: url("/images/sprite-global.png");
  background-repeat: no-repeat;
  background-position: -22px 0;
  -webkit-background-size: 384px 288px;
  -moz-background-size: 384px 288px;
  -o-background-size: 384px 288px;
  background-size: 384px 288px;
  width: 94px;
  height: 59px;
}
<strong i="31">@media</strong> only screen and (-webkit-min-device-pixel-ratio: 1.3), 
       only screen and (min--moz-device-pixel-ratio: 1.3), 
       only screen and (-o-min-device-pixel-ratio: 4/3), 
       only screen and (min-device-pixel-ratio: 1.3), 
       only screen and (min-resolution: 124dpi), 
       only screen and (min-resolution: 1.3dppx) {
  h1 a {
    background-image: url("/images/[email protected]");
  }
}

Sekarang bayangkan kasus ini diulang berkali-kali. Tanpa pengelompokan, satu-satunya cara untuk mengurangi beban ekstra ini adalah dengan memindahkan setiap gaya retina ke dalam file KURANG khusus, yang mungkin berfungsi untuk situs kecil, tetapi tidak realistis untuk situs besar.

Di sinilah masuk akal untuk mengelompokkannya dan memisahkannya, terutama jika Anda memiliki situs besar dengan banyak modul (seperti milik kami).

Saya tahu apa yang Anda maksud tentang mengganti gaya, dan saya tidak yakin Anda dapat dengan aman mengimplementasikan fitur yang tepat ini tanpa berpotensi mengacaukan cascading yang mungkin diinginkan oleh seorang desainer.

Bagi saya ini terdengar lebih seperti dapat mendefinisikan "bagian" (placeholder) dan kemudian mendefinisikan gaya untuk ditempatkan di dalamnya, dalam urutan apa pun yang ditulis. Ini cukup umum di templat sisi server, di mana Anda memiliki bagian "skrip" atau "kepala" dan kemudian halaman Anda dapat menyuntikkan konten ke dalamnya saat dimuat.

Jadi, saya ingin dapat melakukan ini dalam file KURANG pada dasarnya:

<strong i="39">@media</strong> { // retina query
    @renderSection("retina")
}

// in another file
h1 {
    <strong i="40">@section</strong> retina {
        // retina styles
    }
}

@section akan diganti pada kompilasi dengan pemilih saat ini.

Jadi, mixin sprite saya hanya akan menjadi:

.sprite(<strong i="46">@spritePath</strong>, <strong i="47">@hdpiPath</strong>, <strong i="48">@x</strong>, <strong i="49">@y</strong>, <strong i="50">@size</strong>: auto) {
    background-image: url(@spritePath);  
    background-repeat: no-repeat;
    background-position: -1 * <strong i="51">@x</strong> -1 * @y; // Negativize the value
    .background-size(@size);
    <strong i="52">@section</strong> retina {
        background-image: url(@hdpiPath);
    }
}

Tidak perlu sintaks ini (atau implementasi), saya mendasarkannya dari sintaks ASP.NET Razor karena itulah yang saya kenal dan saya suka sintaksnya.

Ini contoh yang bagus .. dan kasus penggunaan yang bagus .. Anda bisa melakukannya

@media-section

(atau grup media) yang kemudian akan memberi tahu lebih sedikit untuk mengelompokkan media bersama-sama (secara opsional menggabungkannya ke dalam kueri media jika sudah ada yang memungkinkan Anda untuk menarik aturan ke mana pun Anda ingin meletakkannya) .. mungkin itu apa maksudmu?

Saya tergoda untuk berpikir itu ide yang bagus (dan tidak terlalu sulit untuk diterapkan)

+1 untuk @media-grup

+1 @media-grup

Opsi lainnya adalah memiliki opsi global untuk mengelompokkan benar/salah.

Hmm, mungkin ini ide yang bagus. Apakah akan ada kasus di mana pengelompokan selektif akan diperlukan?

Saya pikir dalam banyak kasus, orang hanya ingin kueri media mereka lebih ringkas sehingga opsi global untuk saat ini mungkin merupakan cara yang tepat. Jika ada yang mengklaim membutuhkan pengelompokan selektif, kata kunci baru dapat ditambahkan nanti.

+1 untuk opsi pengelompokan global.

ya.. karena kami melihat dengan @import bahwa menambahkan beberapa kata kunci bukanlah cara yang tepat dan menambahkan opsi tidak terlalu kontroversial.

Saya akan mengatakan tambahkan opsi karena itu akan segera berguna dan akan dapat hidup berdampingan sebagai penggantian dengan impor selektif jika itu pernah dibuat.

Halo, saya baru saja melihat masalah ini dan ingin membagikan aplikasi kecil yang saya buat ketika saya perlu mengelompokkan kueri media. Ini bukan aplikasi yang sudah jadi. Lebih seperti beberapa penelitian untuk alat masa depan. Jadi saya hanya ingin menunjukkan idenya, karena menurut saya itu adalah sesuatu yang harus diterapkan. (mungkin ada bug dan masalah lain) tetapi saya telah menguji dengan proyek terakhir saya yang mencakup bootstrap Twitter dan berfungsi dengan baik. (tidak ada masalah dengan urutan aturan) beri tahu saya;)

http://mqhelper.nokturnalapp.com

Halo!

Apakah seseorang ditugaskan untuk ini? Ini adalah fitur hebat yang bisa sangat berguna untuk mengurangi file css saat dibuat dengan less. Dan dengan cara ini, akan lebih mudah bagi pengembang untuk bekerja dengan semua @mqs ini.

@AoDev mqhelper jelas merupakan langkah ke arah yang benar, saya bisa melihatnya berguna sebagai bagian dari proses linting CSS untuk saat ini. Saya pikir itu hanya membutuhkan fungsionalitas inti yang diekstraksi dari hal-hal front-end di demo Anda.

Ya, tetapi tujuan aplikasi saya bukan untuk menjadi bagian dari "alat nyata". Saya baru saja melihat banyak orang di sini bertanya-tanya apakah mengelompokkan kueri media bisa menjadi masalah dan ingin menunjukkan bahwa itu bisa dilakukan. Kode ada untuk para pengembang yang lebih sedikit jika mereka ingin memiliki ide dan menggunakan bagian-bagiannya. Tapi saya bisa menjadikannya modul "nyata" jika Anda mau :)

Saya sudah mengaturnya, ini pekerjaan yang rapi, terima kasih.

@Soviut @lukeapage Saya pikir pengelompokan selektif paling masuk akal. Semua atau tidak sama sekali merusak upaya untuk mempertahankan kaskade. Harus sesuatu yang mirip untuk diperluas, atau mungkin secara harfiah menambahkan kata kunci grup. Seperti sintaks ini akan sangat bagus:

<strong i="8">@tablet</strong>: (max-width: 979px);

.a {
  color: yellow;
  <strong i="9">@media</strong> <strong i="10">@tablet</strong> group {
    color: red;
  }
}
.b {
  background: black;
  <strong i="11">@media</strong> <strong i="12">@tablet</strong> group {
    background: white;
  }
}

//output
.a { color: yellow; }
.b { background: black; }
<strong i="13">@media</strong> (max-width: 979px) {
  .a { color: red; }
  .b { background: white; }
}

Halo, pengelompokan kueri media akan menjadi tambahan yang sangat bagus. Sementara itu saya telah menemukan ide ini, saya ingin tahu apakah itu dapat digunakan dengan fitur :extend akan datang untuk menghindari properti duplikat:

// Define the media queries
<strong i="7">@step1</strong>: ~"only screen and (max-width: 960px)";
<strong i="8">@step2</strong>: ~"only screen and (min-width: 961px)";

// Default empty mixins
.step1() {}
.step2() {}

// Custom styles
.test { color: blue; }

// Change the style in the media queries
.step1() {
  .test { color: red; }
}

.step2() {
  .test { color: green; }
}

// Finally render the media queries
<strong i="9">@media</strong> <strong i="10">@step1</strong> { .step1(); }
<strong i="11">@media</strong> <strong i="12">@step2</strong> { .step2(); }

Alat yang dibuat oleh @AoDev sangat bagus untuk menunjukkan bagaimana pendekatan "semua atau tidak sama sekali" seharusnya tidak terlalu penting. Pengelompokan kueri media tidak mengalami efek samping yang sama dari gaya pengelompokan/penyusunan ulang. Adakah yang bisa memberikan contoh dunia nyata (diuji terhadap alat yang dibuat oleh @AoDev ) yang menunjukkan bagaimana metode semua atau tidak sama sekali cacat?

@kamranayub dengan sempurna menjelaskan situasi persis yang saya hadapi. Secara pribadi, saya ingin melihat beberapa bentuk implementasi ini. @DesignByOnyx , kode pengujian di bawah ini tidak dapat dikompilasi dengan benar dengan alat @AoDev . Saya lebih suka melakukan gaya seperti ini seperti yang disebutkan kamranayub. Jauh lebih bersih ketika berurusan dengan banyak file yang lebih sedikit di situs yang lebih besar.

.footer ul {

  margin: 10px;

  <strong i="9">@media</strong> @layout-tablet, @layout-full {
    font-size: 13px;
    font-weight: bold;
  }
  <strong i="10">@media</strong> @layout-mobile {
    font-size: 10px;
    padding-left: 10px;
  }

  li {

    background: black;
    color: white;
    padding: 10px;

    <strong i="11">@media</strong> @layout-tablet, @layout-full { .border-radius(@radius) }
    <strong i="12">@media</strong> @layout-mobile { .border-radius(@radius-mobile) }   
  }

}

Itu tidak berfungsi karena Anda telah menggunakan lebih sedikit sintaks. Ini dimaksudkan untuk bekerja
dengan CSS.
Pada 2 Juli 2013 21:19, "P Macom" [email protected] menulis:

@kamranayub https://github.com/kamranayub menjelaskan dengan tepat
situasi yang saya hadapi. Secara pribadi, saya ingin melihat beberapa bentuk
dari implementasi ini. @DesignByOnyx https://github.com/DesignByOnyx ,
kode pengujian di bawah ini tidak dapat dikompilasi dengan benar dengan @A oDevhttps://github.com/AoDev 's
alat. Saya lebih suka melakukan gaya seperti ini seperti yang disebutkan kamranayub.
Jauh lebih bersih ketika berurusan dengan banyak file yang lebih sedikit di situs yang lebih besar.

.footer ul {

margin: 10 piksel;

@media @layout-tablet, @layout-full {
ukuran font: 13px;
font-berat: tebal;
}
@media @layout-mobile {
ukuran font: 10px;
padding-kiri: 10px;
}

aku {

background: black;
color: white;
padding: 10px;

<strong i="34">@media</strong> @layout-tablet, @layout-full { .border-radius(@radius) }
<strong i="35">@media</strong> @layout-mobile { .border-radius(@radius-mobile) }

}
}

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/less/less.js/issues/950#issuecomment -20369038
.

Apakah proposal untuk menjalankan logika yang digunakan oleh alat @AoDev setelah LESS diproses? Saya tidak bisa memikirkan kasus di mana itu tidak akan menjadi apa yang saya inginkan dari atas kepala saya.

Apakah proposal untuk menjalankan logika yang digunakan oleh alat @AoDev setelah LESS diproses? Saya tidak bisa memikirkan kasus di mana itu tidak akan menjadi apa yang saya inginkan dari atas kepala saya.

Saya pikir itu pilihan untuk sementara, saya akan mempertimbangkan pembungkus @AoDev 's solusi dalam grunt.js modul yang sehingga dapat secara otomatis dijalankan setelah KURANG diproses (ini didasarkan pada asumsi bahwa pre-processing adalah menjadi dilakukan sebelum penempatan, bukan dengan cepat)

Tugas kasar tentu akan menyenangkan untuk sementara dan berguna secara universal untuk CSS mentah. Namun, mengingat seberapa banyak yang sudah dilakukan @media magic LESS, opsi pengelompokan tampaknya logis.

Kemudian lagi, tugas Grunt tersebut mungkin dapat sepenuhnya memisahkan kueri media ke dalam file mereka sendiri, bagi mereka yang suka memuat lembar gaya seluler dengan cepat.

Sekarang setelah Anda menyebutkannya, memisahkan stylesheet adalah opsi yang berguna untuk dimiliki - saat ini Anda perlu membuat file sumber Anda secara khusus untuk melakukannya.

Mungkin ada ruang di sini untuk alat pengoptimal kueri media terpisah untuk mengelompokkan dan secara opsional membagi kueri media?

Sangat. Saya tidak yakin apakah CSSO sudah melakukan ini, menjadi satu-satunya penulis ulang CSS yang saya tahu juga memiliki tugas Grunt yang terkait dengannya. Tetapi bahkan itu tidak dapat membagi hal-hal seperti kueri media menjadi file terpisah. Demikian pula, penulisan ulangnya sangat mendasar, berdasarkan pemilih dan atribut yang identik, berbeda dengan struktur DOM.

Mqhelper sudah memberi Anda kembali kueri media individual, periksa github
halaman untuk lebih jelasnya. file css terpisah dapat dibangun dari sana.
Pada 5 Juli 2013 10:08, "Soviut" [email protected] menulis:

Sangat. Saya tidak yakin apakah CSSO sudah melakukan ini, menjadi satu-satunya CSS
rewriter Saya tahu itu juga memiliki tugas Grunt yang terkait dengannya. Tapi bahkan
itu tidak dapat membagi hal-hal seperti kueri media menjadi file terpisah. Demikian pula,
penulisan ulangnya sangat mendasar, berdasarkan penyeleksi dan atribut yang identik,
sebagai lawan dari struktur DOM.

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/less/less.js/issues/950#issuecomment -20505834
.

Kedengarannya seperti sesuatu yang berguna untuk jangka panjang dan tidak terlalu sulit
(baik opsi pengelompokan dan opsi file terpisah) jika salah satu dari Anda mau
ingin menerapkan saya dapat memberikan bantuan ...

Saya tidak ingin mengecilkan hati untuk beralih ke beberapa jenis ide "bagian" atau "kelompok" untuk mengimplementasikan ini (saya pikir itu bagus). Namun, jika seseorang menginginkan kemampuan untuk mendefinisikan info properti @media dalam kode yang didefinisikan untuk css biasa, tetapi mengelompokkannya dalam satu kueri @media di tempat lain dalam kode, di sana setidaknya ada dua cara yang saat ini dapat dilakukan dengan fungsionalitas KURANG, memberikan kontrol penempatan yang baik, tetapi harus diakui dengan beberapa pengkodean tambahan di atas apa yang dibutuhkan oleh solusi yang diusulkan (jadi tentu saja, terus kerjakan itu). Mempertimbangkan:

<strong i="8">@media</strong> screen {
  .my-class > .mediaScreen();
  #screenSpace1(screen);
  #screenSpace2(screen);
}

//technique #1 only works for a top level class or id that can act as a namespace
//and would not handle a deep nesting very well
.my-class {
  regular-property: value;

  .mediaScreen(<strong i="9">@selectorString</strong>: ~'.my-class') { //full path needs repeat here if deeply nested
    @{selectorString} {
      media-screen-property: value;
    }
  }
}

//technique #2 allows for tag selectors and easier deeper nesting 
#screenSpace1(<strong i="10">@place</strong>: noMedia) {
  div > ul {
    .setProps() when (<strong i="11">@place</strong> = noMedia) {
       regular-property: value;
    }
    .setProps() when (<strong i="12">@place</strong> = screen) {
       screen-property: value;
    }
    .setProps();

    li {
       .setProps() when (<strong i="13">@place</strong> = noMedia) {
          regular-property: value;
          &:hover { regular-property: value; }
       }
       .setProps() when (<strong i="14">@place</strong> = screen) {
          screen-property: value;
          &:hover { screen-property: value; }
        }
       .setProps();
    }
  }
}
#screenSpace1();

.more-classes-not-needing-media {property: value;}

#screenSpace2(<strong i="15">@place</strong>: noMedia) {
  .someClass {
    .setProps() when (<strong i="16">@place</strong> = noMedia) {
       regular-property: value;
    }
    .setProps() when (<strong i="17">@place</strong> = screen) {
       screen-property: value;
    }
    .setProps();

    > a {
       .setProps() when (<strong i="18">@place</strong> = noMedia) {
          regular-property: value;
          &:hover { regular-property: value; }
       }
       .setProps() when (<strong i="19">@place</strong> = screen) {
          screen-property: value;
          &:hover { screen-property: value; }
        }
       .setProps();
    }
  }
}
#screenSpace2();

Yang menghasilkan css ini:

<strong i="23">@media</strong> screen {
  .my-class {
    media-screen-property: value;
  }
  div > ul {
    screen-property: value;
  }
  div > ul li {
    screen-property: value;
  }
  div > ul li:hover {
    screen-property: value;
  }
  .someClass {
    screen-property: value;
  }
  .someClass > a {
    screen-property: value;
  }
  .someClass > a:hover {
    screen-property: value;
  }
}
.my-class {
  regular-property: value;
}
div > ul {
  regular-property: value;
}
div > ul li {
  regular-property: value;
}
div > ul li:hover {
  regular-property: value;
}
.more-classes-not-needing-media {
  property: value;
}
.someClass {
  regular-property: value;
}
.someClass > a {
  regular-property: value;
}
.someClass > a:hover {
  regular-property: value;
}

Saya sudah lama ingin melakukan sesuatu seperti:

/*
 * Span mixins
 * adapted from Gridpak Beta LESS
 * http://gridpak.com/
 * Created by <strong i="6">@erskinedesign</strong>
 */

.mixin-span(<strong i="7">@num</strong>, <strong i="8">@gutter_pc</strong>, <strong i="9">@padding</strong>, @max_columns) when (<strong i="10">@num</strong> > @max_columns) {
    .mixin-span(<strong i="11">@max_columns</strong>, <strong i="12">@gutter_pc</strong>, <strong i="13">@padding</strong>, @max_columns);
}
.mixin-span(<strong i="14">@num</strong>, <strong i="15">@gutter_pc</strong>, <strong i="16">@padding</strong>, @max_columns) when (<strong i="17">@num</strong> =< @max_columns) {
    <strong i="18">@one_col</strong>: (100% - (<strong i="19">@gutter_pc</strong> * (<strong i="20">@max_columns</strong> - 1))) / @max_columns;
    width:(<strong i="21">@one_col</strong> * @num) + (<strong i="22">@gutter_pc</strong> * (<strong i="23">@num</strong> - 1));
    padding:@padding;
    margin-left:@gutter_pc;
}
.mixin-span_first() {
    margin-left:0;
}

// end of adapted Gridpak LESS

// Namespaced mixin sets

#mob{
    <strong i="24">@max_columns</strong>: 1;
    <strong i="25">@padding</strong>: 0 1.5%;
    <strong i="26">@gutter_pc</strong>: 5%;

    .span(@col){
        <strong i="27">@media</strong> screen and (max-width:300px){
            .mixin-span(<strong i="28">@col</strong>, <strong i="29">@gutter_pc</strong>, <strong i="30">@padding</strong>, @max_columns);
            .mixin-span_first;
        }
    }
}

#desk{
    <strong i="31">@max_columns</strong>: 10;
    <strong i="32">@padding</strong>: 0 3%;
    <strong i="33">@gutter_pc</strong>: 5%;

    .span(@col){
        <strong i="34">@media</strong> screen and (min-width:301px){
            .mixin-span(<strong i="35">@col</strong>, <strong i="36">@gutter_pc</strong>, <strong i="37">@padding</strong>, @max_columns);
        }
    }
}

//assign different layouts per namespaced breakpoint
/* ----- Header ----- */
#header{
    #mob > .span(2);
    #desk > .span(4);
    .mixin-span_first;
    background-color:#888;
    color:#fff;
}

/* ----- Main ----- */
#main{
    #mob > .span(1);
    #desk > .span(6);
    background-color:#eee;
    color:#111;
}

tetapi tanpa pengelompokan, css yang dihasilkan agak besar

/* ----- Header ----- */
#header {
  margin-left: 0;
  background-color: #888;
  color: #fff;
}
<strong i="41">@media</strong> screen and (max-width: 300px) {
  #header {
    width: 100%;
    padding: 0 1.5%;
    margin-left: 5%;
    margin-left: 0;
  }
}
<strong i="42">@media</strong> screen and (min-width: 301px) {
  #header {
    width: 37%;
    padding: 0 3%;
    margin-left: 5%;
  }
}
/* ----- Main ----- */
#main {
  background-color: #eee;
  color: #111;
}
<strong i="43">@media</strong> screen and (max-width: 300px) {
  #main {
    width: 100%;
    padding: 0 1.5%;
    margin-left: 5%;
    margin-left: 0;
  }
}
<strong i="44">@media</strong> screen and (min-width: 301px) {
  #main {
    width: 58%;
    padding: 0 3%;
    margin-left: 5%;
  }
}

Ada solusi untuk ini https://github.com/buildingblocks/grunt-combine-media-queries namun hanya dipesan dengan lebar minimum saat ini sehingga terutama berguna untuk situs seluler pertama.

IMO masuk akal untuk menggeneralisasi masalah ke kontrol pengelompokan ruang lingkup yang akan memberikan solusi untuk masalah #930

https://github.com/Se7enSky/group-css-media-queries

Alat hebat @krava ! Terima kasih

Luar biasa!!! IMO masuk akal menerapkan fitur KRAVA di KURANG

+1

Saya ingin melakukannya sebagai plugin. seharusnya tidak terlalu keras. terlalu banyak yang harus dilakukan!

Saya pikir plugin harus mengambil prioritas lebih rendah daripada memiliki sistem untuk memuat plugin secara otomatis (options.json). Tapi ya, plugin masuk akal sebagai fitur tambahan.

Apakah opsi ini sudah diterapkan?
Ini mungkin akan mengurangi css keluaran saya hingga setengahnya karena saya menggunakan kueri media di dalam komponen dan akan dengan senang hati mengelompokkannya pada tahap keluaran.

Mengenai pengurutan ulang slector, jika Anda menggunakan kata kunci "grup" untuk mengelompokkan sesuatu, Anda menyadari bahwa itu akan dihapus dari aliran logis saat ini dan ditempatkan di area yang dikelompokkan.

http://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/
Menurut artikel ini, tidak perlu mengelompokkan kueri media.
Tapi pluginnya bagus.

Ini bukan masalah kinerja karena ini adalah ukuran file CSS yang dihasilkan. Puluhan string <strong i="5">@media</strong> screen and (max-width: 480px) mulai bertambah dalam hal ukuran file CSS.

Saya telah mengajukan pertanyaan ini pada SO dan seseorang memberikan sebagian jawaban untuk masalah ini.

@seven-phases-max memberi Anda jawabannya dan merujuk kembali ke masalah ini dalam jawabannya. sangat meta ;)

Saya pasti lebih suka metode mixin untuk menggabungkan kueri media, sebagai lawan dari pemrosesan pos. Ini memungkinkan pengetikan yang lebih mudah dan kontrol lebih besar atas apa yang digabungkan dan bagaimana caranya.

Di sini, di komentar Anda dapat melihat solusi yang saya gunakan di semua proyek saya:
https://github.com/less/less.js/issues/950#issuecomment -17723748

Saya baru saja melakukan pencarian dan menemukan dua plugin kasar yang melakukan pengelompokan kueri media:

https://github.com/buildingblocks/grunt-combine-media-queries

https://github.com/Se7enSky/grunt-group-css-media-queries

Menggabungkan kueri media juga tersedia untuk gulp .
http://github.com/konitter/gulp-combine-media-queries

Sejak v2 Anda dapat menggunakan plugin, jadi lihat https://github.com/bassjobsen/less-plugin-group-css-media-queries (dan https://github.com/bassjobsen/less-plugin-pleeease)

Menutup karena ini didukung oleh plugin, dan bukan prioritas untuk pindah ke inti (AFAIK - @less/admin benar jika ini salah).

@gyopiazza Saya punya pertanyaan tentang https://github.com/less/less.js/issues/950#issuecomment -17723748 di atas: mengapa Anda perlu menginisialisasi mixin? Maksud saya, CSS dikompilasi tanpa init. Saya kira saya mencoba memahami praktik dan penggunaan terbaik.

@nfq Ini bukan inisialisasi tetapi hanya definisi kosong "default". Ini diperlukan jika Anda tidak memberikan mixin .step*() kustom Anda (yaitu diasumsikan bahwa Anda mungkin memiliki hal-hal ini di file yang berbeda, misalnya definisi "default" .step*() dan renderingnya dalam beberapa generik utilitas/kode perpustakaan, sedangkan definisi kustom .step*() ada dalam kode khusus tema/proyek Anda).

@nfq Sebenarnya tidak perlu.
Seperti yang disebutkan @seven-phases-max, ini berguna untuk menghindari kesalahan jika Anda tidak menggunakan mixin dalam kode Anda, karena kueri media akan memanggil mixin yang tidak ada.

Btw, keuntungan dari teknik ini adalah menggabungkan kueri media memperlambat waktu kompilasi (sedikit).

@gyopiazza Terima kasih atas balasan cepatnya. Saya tidak keberatan dengan waktu kompilasi, dan untuk proyek besar, saya pasti lebih suka mengelompokkan semua kueri media di bagian bawah lembar gaya utama. Saya mencoba beberapa plugin tetapi menemukan cara Anda yang paling mudah untuk kasus penggunaan kami dan yang paling nyaman. Terima kasih!!

@seven-phases-max Terima kasih, jawaban Anda masuk akal. Saya menggunakan lebih sedikit, tetapi belum memahami cara terbaik untuk mencapai hal-hal tertentu!

Perhatikan bahwa clean-css juga mendukung penggabungan @media sejak v3, dan begitu juga less-plugin-clean-css

dengan main.less:

header {
    color: green;

    <strong i="9">@media</strong> only screen (max-width: 500px) { color: red; }
}

footer {
    color: green;

    <strong i="10">@media</strong> only screen (max-width: 500px) { color: red; }
}

lessc --clean-css="advanced" main.less keluaran:
footer,header{color:green}<strong i="15">@media</strong> only screen (max-width:500px){footer,header{color:red}}

less-plugin-clean-css menyetel --skip-advanced true secara default, Anda harus secara eksplisit menyetel opsi advanced untuk penggabungan @media

@nfq Dengan "pendekatan mixin" kueri media masih dikompilasi di bagian bawah (atau di mana pun Anda mendeklarasikannya).

@gyopiazza terima kasih, ya. Senang dengan pendekatan ini!!

@bassjobsen Saya pasti akan menggunakan ini pada proyek yang lebih besar. Saya belum benar-benar mulai menggunakan lebih sedikit plugin. Terima kasih untuk tipsnya!