Combine multiple 'matching' nested media queries

[spacedawwwg]

Currently this code:

.ul {
    font-weight: normal;

    @media (min-width: 768px) {
        font-weight: bold;
    }

    li {
        font-style: italic;

        @media (min-width: 768px) {
            font-style: normal;
        }
    }
}

...will output as:

.ul { font-weight: normal }
@media (min-width: 768px) {
    ul { font-weight: bold }    
}
.ul li { font-style: italic }
@media (min-width: 768px) {
    ul li { font-style: normal }    
}

..the media query '@media (min-width: 768px)' is duplicated creating bloat. Is there a way to get LESS to combine matching queries so it is output as:

.ul { font-weight: normal }
.ul li { font-style: italic }
@media (min-width: 768px) {
    ul { font-weight: bold }
    ul li { font-style: normal }    
}

[mrcljx]

I thought about this when I implemented the nested media query feature.

The problem is that LESS would have to change the order of CSS rules - which I deemed more important than the bloat that is generated otherwise.

body {
  a { b: 0; }
  @media (min-width: 1px) { a { b: 1; } }
  a { b: 0; }
  @media (min-width: 1px) { a { b: 1; } }
  a { b: 0; }
  @media (min-width: 1px) { a { c: 1; } }
}

The current implementation generates

body a { b: 0; }
@media (min-width: 1px) { body a { b: 1; } }
body a { b: 0; }
@media (min-width: 1px) { body a { b: 1; } }
body a { b: 0; }
@media (min-width: 1px) { body a { c: 1; } }

// a device with `min-width: 1px` would have the effective CSS of

body a {
  b: 0;
  c: 1;
}

If LESS would combine the media-queries it would be something like:

body a { b: 0; }
@media (min-width: 1px) { body a { b: 1; c: 1; } }

// a device with `min-width: 1px` would have the effective CSS of

body a {
  b: 1;
  c: 1;
}

Since CSS rules order matters I decided not to put any effort in how to combine the media-queries (or rules all together) any further. Indeed, the generated LESS file contains bloat, but it doesn't surprise you with magic, which make things hard to debug / to express.

If you want to avoid the bloat, restructure your LESS file. If you want to reduce the impact of the bloat, use gzipped css files (which should really crush these duplications)

[matthew-dean]

Correct. CSS order is quite important and merging alters that.

[andrewtennison]

I have only been using less in quite a basic implementation, but I have also run into this. Would it be possible to use functions in any advanced manner to be able to pass in rules and define where they get output?

Rough idea that I appreciate won't actually work as is:

li {
width: 200px;
@480 {
width: 100px
}

// might make more sense .480({width:100px})

}

@media (min-width:480px){
@480()
}

[reitermarkus]

I always use variables for media queries.

.tablet {
  something {
    property: value;
  }
}

@media(min-width:600px) {
  .tablet
}

I know this won't work with nested properties, but I also don't think it is a good idea to use them, you lose the overview completely.

[spacedawwwg]

We have attempted to do something about this using Grunt:

https://npmjs.org/package/grunt-combine-media-queries

[Soundvessel]

Isn't CSS order a non-issue if you are properly using specificity and keeping your styles modular? Other than nomralize of course.

[lukeapage]

Did you mean to comment on the obsolete ruby repo?

[gotbahn]

There is a native LESS way to combine media queries with mixins.
Checkout article Combine & handle Media Queries in LESS

[seven-phases-max]

@godban There're more advanced (and more crazy) methods (see for example 1, 2), but all such tricks are sort of useless now because indeed there's stuff like group-css-media-queries and similar plugins/tools.

---

Also notice this repo is absolete.

[seven-phases-max]

Closing as moved to less/less.js#950.