javascript - CSS编辑引擎

Question

我正在开发一个网络编辑器，用户可以在其中自定义门户的一些外观和感觉。为实现这一点，我考虑在引擎盖下使用该工具创建一个 CSS 文件。

例如，我为用户提供了一个 UI 编辑器，他可以在其中为页眉选择字体名称和字体大小，因此创建的 CSS 文件应该如下所示:

.header {
  font-size: fontSize;
  font-familiy: fontFamiliy;
}

其中 fontSize 和 fontFamily 是来自编辑器的值。

问题是我不确定执行此操作的最佳方法是什么。用户需要能够返回到编辑器并编辑值，因此引擎需要生成 CSS，但它也需要存储和加载值。

此外，字体大小和字体系列只是一个简单的示例，自定义功能可能更复杂。

一个想法是编写代码，根据编辑器中的值动态创建 CSS 文本，例如:

var cssString = '.header {';
cssString = 'font-size: ' + fontSize + ';';

对于加载，使用正则表达式或类似的东西解析 CSS 文本并检索值。

但我觉得这不是最好的方法。

Answer 1

我建议将 LESS 编译器与 LessPHP 一起使用编译器

[variables.less]
@black: #000;
@red: #f00;
@green: #0F0;
@blue: #00F;

[editor]

<label>
    Font color:
    <select name="Less[header][color]">
        <options value="@black">Red</options>
        <options value="@red">Red</options>
        <options value="@green">Red</options>
        <options value="@blue">Red</options>
    </select>
</label>

<label>
    Header background color color:
    <select name="Less[header][background-color]">
        <options value="@black">Red</options>
        <options value="@red">Red</options>
        <options value="@green">Red</options>
        <options value="@blue">Red</options>
    </select>
</label>

...

[makeLess.php]
$less = '';

foreach ($_POST['Less'] as $element) {
    $less .= ".{$element} {\r\n";
        foreach ($element as $attribute => $value) {
            $less .= "\t{$attribute}: {$value}\r\n";
        }

    $less .= "}\r\n";
}

$db->save($_POST['Less']); // Delete old values, insert new. No need to check if changed.
file_put_contents(__DIR__.'/phpLess.less', $less);

require "lessc.inc.php";

$less = new lessc();
echo $less->checkedCompile(__DIR__.'/phpLess.less', __DIR__'/style.css');

---

将所有 Less 变量保存为 PHP 数组(也许是硬编码？)以便您可以重用它并从 PHP 数组创建 Less 变量文件。