媒体查询分组，而不是匹配的多个分散的媒体查询 [英] Media Query grouping instead of multiple scattered media queries that match

问题描述

我正在尝试LESS（不是SASS语法的粉丝），并一直在试图找出最好的方式来做媒体查询。

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.

我阅读了此博客文章如何做媒体查询与LESS，但它指出这一事实，这导致所有的媒体查询分离和分散在整个结果CSS。这不是真的打扰我（我可以关心更少的结果和更多的工作）。什么让我困扰我是一个评论，谈到在从iOS设备查看问题，评论者发现，一旦媒体查询合并的问题已解决。

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.

有人找到一个好的解决方案，用于使用LESS的媒体查询？

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?

（只是，这很重要我使用无点作为引擎解析我的 .less 文件）

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

推荐答案

首先，你在问题中给出的解决方案肯定有一些有用的。

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.

b

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输出

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

这篇关于媒体查询分组，而不是匹配的多个分散的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！