Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I adapt <a href="http://leafo.net/lessphp/docs/#compiling_automatically" rel="nofollow">autoCompileLess</a> function to group media query at the end of CSS without changing the less code.</p> <pre><code>@mobile: ~"only screen and (max-width: 529px)"; .test { color:green; @media @mobile { color:red; } } .test2 { color:red; @media @mobile { color:blue; } } </code></pre> <p>Compile with less by default</p> <pre><code>.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; } } </code></pre> <p>Compile less with the following function</p> <pre><code>.test { color:green; } .test2 { color:red; } @media only screen and (max-width: 529px) { .test { color:red; } .test2 { color:blue; } } </code></pre> <p>And the function :</p> <pre><code>&lt;?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-&gt;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 =&gt; $val) { $final .= "\n" . '@media' . $id . '{' . $val . '}' . "\n"; } // save less // save CSS with groups of media query if (!is_array($cache) || $newCache["updated"] &gt; $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'); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload