1

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

例如：

// 较少的
.header {
  @media all and (min-width: 240px) and (max-width: 319px) {
    字体大小：12px；
  }

  @media all and (min-width: 320px) and (max-width: 479px) {
    字体大小：16px；
    字体粗细：粗体；
  }
}

。身体 {
  @media all and (min-width: 240px) and (max-width: 319px) {
    字体大小：10px；
  }

  @media all and (min-width: 320px) and (max-width: 479px) {
    字体大小：12px；
  }
}

// 输出 CSS
@media all and (min-width: 240px) and (max-width: 319px) {
  .header {
    字体大小：12px；
  }
}
@media all and (min-width: 320px) and (max-width: 479px) {
  .header {
    字体大小：16px；
    字体粗细：粗体；
  }
}
@media all and (min-width: 240px) and (max-width: 319px) {
  。身体 {
    字体大小：10px；
  }
}
@media all and (min-width: 320px) and (max-width: 479px) {
  。身体 {
    字体大小：12px；
  }
}

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

@media all and (min-width: 240px) and (max-width: 319px) {
  .header {
    字体大小：12px；
  }
  。身体 {
    字体大小：10px；
  }
}
@media all and (min-width: 320px) and (max-width: 479px) {
  .header {
    字体大小：16px；
    字体粗细：粗体；
  }
  。身体 {
    字体大小：12px；
  }
}

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

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

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

4

2 回答 2

4

我调整autoCompileLess函数以在 CSS 末尾对媒体查询进行分组，而无需更改 less 代码。

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

默认使用less编译

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

用下面的函数编译less

.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');
于 2013-08-12T16:24:06.630 回答
0

为什么您的媒体查询中也没有选择器，就像您预期的输出一样？然后，您将摆脱对您所做的一切的双重媒体查询......

于 2012-09-02T19:10:29.690 回答