将多个媒体查询形成为LESS css的输出 [英] Group multiple media queries formed as output of LESS css

问题描述

我打算在我的项目（PHP）中使用LESS CSS。我计划使用它的嵌套 @media 查询功能。我发现它无法将多个媒体查询分组在它生成的输出css中。

I was planning to use LESS css in my project (PHP). I am planning to use its nested @media query feature. I find that it fails to group the multiple media queries in the output css it generates.

例如：

// LESS
.header {
  @media all and (min-width: 240px) and (max-width: 319px) {
    font-size: 12px;
  }

  @media all and (min-width: 320px) and (max-width: 479px) {
    font-size: 16px;
    font-weight: bold;
  }
}

.body {
  @media all and (min-width: 240px) and (max-width: 319px) {
    font-size: 10px;
  }

  @media all and (min-width: 320px) and (max-width: 479px) {
    font-size: 12px;
  }
}

// output CSS
@media all and (min-width: 240px) and (max-width: 319px) {
  .header {
    font-size: 12px;
  }
}
@media all and (min-width: 320px) and (max-width: 479px) {
  .header {
    font-size: 16px;
    font-weight: bold;
  }
}
@media all and (min-width: 240px) and (max-width: 319px) {
  .body {
    font-size: 10px;
  }
}
@media all and (min-width: 320px) and (max-width: 479px) {
  .body {
    font-size: 12px;
  }
}

我的预期输出是（@media queries已分组）

My expected output is (@media queries grouped)

@media all and (min-width: 240px) and (max-width: 319px) {
  .header {
    font-size: 12px;
  }
  .body {
    font-size: 10px;
  }
}
@media all and (min-width: 320px) and (max-width: 479px) {
  .header {
    font-size: 16px;
    font-weight: bold;
  }
  .body {
    font-size: 12px;
  }
}

我想知道是否可以在LESS（PHP）是否有任何简单的基于PHP的CSS解析器，我可以使用操纵输出CSS分组和合并@media查询。如下面的流程所示。

I would like to know if it can be done in LESS (PHP) it self or is there any simple PHP based CSS parser I can use to manipulate the output CSS to group and merge the @media queries. as shown in the below flow.

  LESS file
      |
      V
[LESSphp compiler]
      |
      V
   CSS file
      |
      V
The CSS file generated
would undergo my script
written using CSS parser
      |
      V
   CSS file
with similar @media
grouped.

如果在LESS（PHP）中实现分组的@media查询不是一个选项，我想知道您的建议

In case achieving grouped @media queries in LESS (PHP) is not an option I would like to know your suggestions on CSS parser (PHP) that can be used in the above flow.

推荐答案

我适应 autoCompileLess 函数可以在CSS结束时将媒体查询分组，而不更改较少的代码。

I adapt autoCompileLess function to group media query at the end of CSS without changing the less code.

@mobile: ~"only screen and (max-width: 529px)";
.test {
    color:green;
    @media @mobile { color:red; }
}    
.test2 {
    color:red;
    @media @mobile { color:blue; }
}

默认编译更少

.test {
    color:green;
}    
.test2 {
    color:red;
}
@media only screen and (max-width: 529px) {
    .test {
        color:red;
    }
}    
@media only screen and (max-width: 529px) {
    .test2 {
        color:blue;
    }
}

使用以下函数编译

.test {
    color:green;
}    
.test2 {
    color:red;
}
@media only screen and (max-width: 529px) {
    .test {
        color:red;
    }
    .test2 {
        color:blue;
    }
}

功能：

<?php
function autoCompileLess($inputFile, $outputFile)
{
    // load cache
    $cacheFile = $inputFile.".cache";

    if (file_exists($cacheFile))
    {
        $cache = unserialize(file_get_contents($cacheFile));
        if (empty($cache)) $cache = $inputFile;
    }
    else
    {
        $cache = $inputFile;
    }

    // compile less
    $less = new lessc;
    $newCache = $less->cachedCompile($cache);

    // save less cache
    $saveCache = $newCache;

    // search media query in CSS
    preg_match_all('#@media(.*?)\{(.+?}[ \n])\}#si',$newCache['compiled'],$match,PREG_SET_ORDER);//$MatchingString now hold all strings matching $pattern.


    $media = array();

    // group same media query
    foreach ($match as $val)
    {
        if (!isset($media[$val[1]])) $media[$val[1]] = '';

        $media[$val[1]] .= $val[2];
    }

    // delete media query of cache
    $newCache['compiled'] = preg_replace('#@media(.*?)\{(.+?}[ \n])\}#si', '', $newCache['compiled']);

    // add groups of media query at the end of CSS
    $final = $newCache['compiled'] . "\n";
    foreach ($media as $id => $val)
    {
        $final .= "\n" . '@media' . $id . '{' . $val . '}' . "\n";
    }

    // save less
    // save CSS with groups of media query
    if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) 
    {
        file_put_contents($cacheFile, serialize($saveCache));
        // file_put_contents($outputFile, $newCache['compiled']);
        file_put_contents($outputFile, $final);
    }
}

// use of function
autoCompileLess('style.less', 'style.css');

这篇关于将多个媒体查询形成为LESS css的输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！