将形成为LESS css输出的多个媒体查询分组 - Group multiple media queries formed as output of LESS css

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

例如：

//少.页眉{@media all和（最小宽度：240px）以及（最大宽度：319px）{字体大小：12px；}@media all和（最小宽度：320px）以及（最大宽度：479px）{字体大小：16px；font weight:bold；}}.车身{@media all和（最小宽度：240px）以及（最大宽度：319px）{字体大小：10px；}@media all和（最小宽度：320px）以及（最大宽度：479px）{字体大小：12px；}}//输出CSS@media all和（最小宽度：240px）以及（最大宽度：319px）{.页眉{字体大小：12px；}}@media all和（最小宽度：320px）以及（最大宽度：479px）{.页眉{字体大小：16px；font weight:bold；}}@media all和（最小宽度：240px）以及（最大宽度：319px）{.车身{字体大小：10px；}}@media all和（最小宽度：320px）以及（最大宽度：479px）{.车身{字体大小：12px；}}

我的预期输出是（@媒体查询分组）

@media all和（最小宽度：240px）以及（最大宽度：319px）{.页眉{字体大小：12px；}.车身{字体大小：10px；}}@media all和（最小宽度：320px）以及（最大宽度：479px）{.页眉{字体大小：16px；font weight:bold；}.车身{字体大小：12px；}}

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

LESS文件|五、[LESSphp编译器]|五、CSS文件|五、生成的CSS文件会接受我的剧本使用CSS解析器编写|五、CSS文件使用类似的@media分组。

如果在LESS（PHP）中实现分组@media查询不是一个选项，我想知道你对CSS解析器（PHP）的建议，这些建议可以在上面的流程中使用。

我将autoCompileLess函数调整为在CSS末尾对媒体查询进行分组，而不更改较少的代码。

@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');

为什么不在媒体查询中也有选择器，就像预期的输出一样？然后你就可以摆脱对你所做的一切的双重媒体查询了…