將多個媒體查詢組合爲輸出的LESS css

Question

我打算在我的項目（PHP）中使用LESS css。我打算使用其嵌套的@media查詢功能。我發現它無法將多個媒體查詢分組到它生成的輸出css中。

例如：

 
// 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查詢分組）

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

我想知道，如果它能夠在更短（PHP）來完成它自己或者是有任何簡單的基於PHP的CSS解析器，我可以用它來操作輸出CSS來分組和合並@media查詢。如下面的流程所示。

 
    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查詢是不是我想知道您對可以在上述流程中使用CSS解析器（PHP）建議的選項。

Answer 1

爲什麼你的媒體查詢中沒有你的選擇器，比如你的預期輸出？那麼你將擺脫雙媒體查詢你所做的一切......

Answer 2

我改編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');