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_invert的新类（例如lessc），现在我们只需要：

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

这样的事情：

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我们可以使用我们的新类lessc_invert，如下所示：

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

这应该做的诀窍=）

例如：

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

现在返回：

a{color:#ff0;}

用LESS反转所有颜色

1 个答案: