Agrupamiento de Media Query en lugar de múltiples consultas de medios dispersos que coinciden

Estoy experimentando con LESS (no soy un fan de la syntax de SASS) y he estado tratando de averiguar cuál sería la mejor forma de hacer consultas de medios con él.

Leí esta publicación de blog sobre cómo “hacer” consultas en los medios con LESS, pero señala el hecho de que esto hace que todas las consultas de los medios se separen y se dispersen por todo el CSS resultante. Esto realmente no me molesta (me podría importar menos el resultado y más sobre el funcionamiento). Lo que sí me molestó fue un comentario que hablaba de problemas cuando se veía desde dispositivos con iOS y el comentarista descubrió que una vez que se consolidaron las consultas de los medios, se resolvió el problema.

¿Alguien ha encontrado una buena solución para usar consultas de medios con LESS?

La forma en que visualizo este funcionamiento sería algo así como …

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

Entiendo que podría haber algunos problemas con esto, pero la configuración actual no parece ser tan beneficiosa.

Así que supongo que mi pregunta es si ha habido alguna buena solución / pirateo para permitir consultas de medios agrupados.

(Solo en caso de que importe, utilizo dotless como el motor para analizar mis archivos .less )

En primer lugar, la solución dada en la pregunta ciertamente tiene cierta utilidad.

Una cosa que pensé, sin embargo, fue que sería bueno definir todas las variables de consulta de medios “cercanas” entre sí (su solución las tendría bajo cada llamada de consulta de medios). Entonces propongo lo siguiente como una solución alternativa. También tiene inconvenientes, uno de los cuales quizás sea un poco más codificante por adelantado.

MENOS Código

 //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); 

Salida CSS

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

Para sitios responsivos de WordPress uso un tema de inicio llamado Bones por Eddie Machado ( http://themble.com/bones/ ). Me gusta más la forma en que utiliza las consultas de medios, tiene diferentes hojas de estilo para diferentes puntos de interrupción (480+, 768+, etc.) que puede cambiar dependiendo de su diseño.

A continuación, los importa con @import en una hoja de estilo debajo de las consultas de medios apropiadas. Editas todo esto en LESS y utilizo Simpless by Kiss ( http://wearekiss.com/simpless ) para comstackr automáticamente mis hojas de estilo .less en .css. Realmente creo que es un buen punto de partida para desarrollar un sitio receptivo simple. Incluso si no está desarrollando en WordPress es posible que desee comprobar cómo están estructurados sus consultas de medios, ya que todo parece funcionar bien, incluso con el uso si es MENOR.