用LESS反转所有颜色

Question

我有一个我很满意的样式表，我使用以下代码对其进行编译。效果很好。

function css($inputFile, $outputFile)
{
    $cacheFile = $inputFile.".cache";

    $cache = file_exists($cacheFile)
        ? unserialize(file_get_contents($cacheFile))
        : $inputFile;

    $less = new lessc;
    $less->setFormatter("compressed");
    $newCache = $less->cachedCompile($cache);

    if ( ! file_exists($outputFile) || ! is_array($cache) || $newCache["updated"] > $cache["updated"])
    {
        file_put_contents($cacheFile, serialize($newCache));
        file_put_contents($outputFile, $newCache['compiled']);
    }
}

我有一种简单的方法来生成一个样式表版本，其中所有定义的颜色都被反转了？你能用 LESS 编译器做一些花哨的事情吗？

我对此感到好奇的原因是，当我反转它的屏幕截图时，该网站看起来不错，而且如果有一种廉价的方法来生成当前黑暗的网站的黑暗版本，那就太酷了开灯。

有什么聪明的想法吗？

Answer 1

您可以简单地扩展 lessc 类并修改编译器以使所有颜色都反转。

我们添加一个扩展类lessc的新类（例如lessc_invert），现在我们只需要：

• 定义一个简单的反转颜色函数：invert_color($c){ return abs($c - 255); }
• 并从lessc 覆盖protected function compileValue($value)，其中我们：
  • 将'raw_color' 类型的值强制转换为'color'，
  • 将'keyword' 类型的值强制转换为'color'（如果在$cssColors 数组中找到）
  • 然后使用invert_color() 函数反转颜色的$r, $g, $b 分量。

类似这样的：

class lessc_invert extends lessc {
  protected function invert_color($c){
    return abs($c - 255);
  }
  protected function compileValue($value) {
    switch ($value[0]) {
    case 'list':
      return implode($value[1], array_map(array($this, 'compileValue'), $value[2]));
    case 'raw_color':
      return $this->compileValue($this->coerceColor($value));
    case 'keyword':
      if (isset(self::$cssColors[$value[1]])) {
        return $this->compileValue($this->coerceColor($value));
      }
      return $value[1];
    case 'number':
      list(, $num, $unit) = $value;
      if ($this->numberPrecision !== null) {
        $num = round($num, $this->numberPrecision);
      }
      return $num . $unit;
        case 'string':
      list(, $delim, $content) = $value;
      foreach ($content as &$part) {
        if (is_array($part)) {
          $part = $this->compileValue($part);
        }
      }
      return $delim . implode($content) . $delim;
    case 'color':
      list(, $r, $g, $b) = $value;
      $r = $this->invert_color(round($r));
      $g = $this->invert_color(round($g));
      $b = $this->invert_color(round($b));
      if (count($value) == 5 && $value[4] != 1) {
        return 'rgba('.$r.','.$g.','.$b.','.$value[4].')';
      }
      $h = sprintf("#%02x%02x%02x", $r, $g, $b);
      if (!empty($this->formatter->compressColors)) {
        if ($h[1] === $h[2] && $h[3] === $h[4] && $h[5] === $h[6]) {
          $h = '#' . $h[1] . $h[3] . $h[5];
        }
      }      
      return $h;
    case 'function':
      list(, $name, $args) = $value;
      return $name.'('.$this->compileValue($args).')';
    default:
      $this->throwError("unknown value type: $value[0]");
    }
  }
}

现在我们可以使用我们的新类lessc_invert，而不是实例化lessc，如下所示：

$less = new lessc_invert;
$less->setFormatter("compressed");
$newCache = $less->cachedCompile($cache);

这应该可以解决问题 =)

---

例如：

echo $less->compile("a { color: blue; }");

现在返回：

a{color:#ff0;}