Media Query grouping instead of multiple scattered media queries that match

Question

I'm experimenting with LESS (not a fan of the SASS syntax) and have been trying to find out what the best way to do media queries with it would be.

I read through this blog post on how to "do" media queries with LESS, but it points out the fact that this causes all the media queries to be separated and scattered throughout the resulting CSS. This doesn't really bother me (I could care less about the result and more about it working). What did bother me was a comment that talked about issues when viewing from iOS devices and the commenter found that once the media queries were consolidated the issue was resolved.

Has anyone found a good solution for using media queries with LESS?

The way I invision this working would be something like...

//Have an overall structure...
.overall(){
    //Have ALL your CSS that would be modified by media queries and heavily use
    //variables that are set inside of each media queries.
}
@media only screen and (min-width: 1024px){
    //Define variables for this media query (widths/etc)
    .overall
}

I understand that there could be some issues with this, but the current setup doesn't seem to be that beneficial.

So I guess my question is if there have been any good solutions/hacks to allow for grouped media queries?

(Just incase it matters I use dotless as the engine to parse my .less files)

Vallee

Answer 1

First, your solution given in the question certainly has some usefulness to it.

One thing I thought, however, was that it would be nice to define all the media query variables "near" one another (your solution would have them under each media query call). So I propose the following as an alternative solution. It also has drawbacks, one being perhaps a bit more coding up front.

LESS Code

//define our break points as variables
@mediaBreak1: 800px;
@mediaBreak2: 1024px;
@mediaBreak3: 1280px;

//this mixin builds the entire media query based on the break number
.buildMediaQuery(@min) {
    @media only screen and (min-width: @min) { 

        //define a variable output mixin for a class included in the query
        .myClass1(@color) {
            .myClass1 {
               color: @color;
            }
        }

        //define a builder guarded mixin for each break point of the query
        //in these is where we change the variable for the media break (here, color)
        .buildMyClass1() when (@min = @mediaBreak1) {
           .myClass1(red);
        }
        .buildMyClass1() when (@min = @mediaBreak2) {
           .myClass1(green);
        }
        .buildMyClass1() when (@min = @mediaBreak3) {
           .myClass1(blue);
        }

        //call the builder mixin
        .buildMyClass1();

        //define a variable output mixin for a nested selector included in the query
        .mySelector1(@fontSize) {
           section {
              width: (@min - 40);
              margin: 0 auto;
              a {
                font-size: @fontSize;
              }
           } 
        }

        //Again, define a builder guarded mixin for each break point of the query
        //in these is where we change the variable for the media break (here, font-size)
        .buildMySelector1() when (@min = @mediaBreak1) {
           .mySelector1(10px);
        }
        .buildMySelector1() when (@min = @mediaBreak2) {
           .mySelector1(12px);
        }
        .buildMySelector1() when (@min = @mediaBreak3) {
           .mySelector1(14px);
        }

        //call the builder mixin
        .buildMySelector1();

        //ect., ect., etc. for as many parts needed in the media queries.
    }
}

//call our code to build the queries
.buildMediaQuery(@mediaBreak1);
.buildMediaQuery(@mediaBreak2);
.buildMediaQuery(@mediaBreak3);

CSS Output

@media only screen and (min-width: 800px) {
  .myClass1 {
    color: #ff0000;
  }
  section {
    width: 760px;
    margin: 0 auto;
  }
  section a {
    font-size: 10px;
  }
}
@media only screen and (min-width: 1024px) {
  .myClass1 {
    color: #008000;
  }
  section {
    width: 984px;
    margin: 0 auto;
  }
  section a {
    font-size: 12px;
  }
}
@media only screen and (min-width: 1280px) {
  .myClass1 {
    color: #0000ff;
  }
  section {
    width: 1240px;
    margin: 0 auto;
  }
  section a {
    font-size: 14px;
  }
}

Widower

The reason I made the suggestions that I made is since LESS uses the most local variable with a given name... You could foreseeable simply override the variables that change. If an image width is all that changed...override that var and leave the other values as is. – Vallee

@Jared--yes, and I believe you could do that with my solution too. It is more a matter of whether you want to see all the various variables for the media queries near each other in the code (like my solution), or if you want to see them separately under their @media definition (like your code). Both will generate them together in the final CSS, but each uses a different approach to the back end code. I'm not sure either is better, just different, and it would depend on programmer's desire and application. – Widower

Answer 2

For responsive Wordpress sites I use a starter theme called Bones by Eddie Machado ( http://themble.com/bones/ ). I rather like the way it uses media queries, it has different stylesheets for different breakpoints (480+, 768+ etc) which you can change depending on your design.

It then imports these with @import into one stylesheet underneath the appropriate media queries. You edit all of these in LESS and, I use Simpless by Kiss ( http://wearekiss.com/simpless ) to compile my .less stylesheets into .css automatically. I really find it a really good starting point for developing a simple responsive site. Even if you're not developing in Wordpress you may want to check out how they're structured their media queries as it all seems to work fine even with the use if LESS.

Blackberry

I'd also add that Simpless can actually track the @imports so even if you are editing 768.less which is imported into base.less it will still compile base.less into base.css when you save 768.less. Great stuff. – Blackberry

Interesting take on it. I don't really like the idea of separate LESS files (knowing that at run-time it will be one), but this could be an option. FYI Dotless is a .NET LESS compiler that returns cssified less and thanks to the web.config can return minified or pretty css. – Vallee

Interesting. That's something I forgot to mention about Simpless actualy, it can also minify and also prefix css too. – Blackberry