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

내가 CSS의 말에 그룹의 미디어 쿼리에 autoCompileLess 기능을 적용 ... 당신이하는 모든 일에 대한 이중 미디어 쿼리를 가진 없애 버릴 것이다. 다음 함수

.test { 
    color:green; 
}  
.test2 { 
    color:red; 
} 
@media only screen and (max-width: 529px) { 
    .test { 
     color:red; 
    } 
    .test2 { 
     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; 
    } 
} 

컴파일 덜 기본적으로 이하의

@mobile: ~"only screen and (max-width: 529px)"; 
.test { 
    color:green; 
    @media @mobile { color:red; } 
}  
.test2 { 
    color:red; 
    @media @mobile { 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');