Grouping media queries instead of multiple scattered media queries that match

Question

I am experimenting with LESS (not a fan of SASS syntax) and trying to figure out what is the best way to do media queries with it.

I read this blog post on how to “make” media queries with LESS, but it indicates that this causes all media queries to be split and scattered throughout all the CSS received. This does not bother me (I could not worry about the results, and worked more about it). What bothered me was a comment that talked about problems when viewing from iOS devices, and the commentator found that after combining media queries the problem was resolved.

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

The way I think this work will 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 may be some problems with this, but the current setup does not seem useful.

So, I think my question is, were there any good solutions / hacks to allow group media queries?

(Just, if that matters, I use it aimlessly as a mechanism to parse my .less files)

Answer 1

Firstly, your decision given in the question certainly has some usefulness.

However, I thought it would be nice to define all the media query variables “next to” each other (your decision will have them under every media query call). Therefore, I propose the following as an alternative solution. It also has flaws, one of which may have encoded the front a bit more.

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; } } 

Answer 2

For sensitive Wordpress sites, I use the Bones by Eddie Machado starter theme ( http://themble.com/bones/ ). I 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.

He then imports them using @import into a single stylesheet under the corresponding media queries. You edit all this in LESS and I use Simpless by Kiss ( http://wearekiss.com/simpless ) to compile my .less stylesheets into .css automatically. I really think this is a good starting point for developing a simple responsive site. Even if you do not work in Wordpress, you can check how they are structured in your media queries, since all this works fine even when using if LESS.