двигатель для редактирования CSS

Question

Я работаю над веб-редактором, где пользователь может настроить внешний вид & ощущения портала. Чтобы достичь этого, я думал, что под капотом инструмент создает файл CSS.

Например, я даю пользователю редактор интерфейса, где он может выбрать название шрифта и размер шрифта для заголовка страницы, так что созданный файл CSS должен быть как:

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

где FONTSIZE и FontFamily является значение от редактора.

Проблема в том, что я не уверен, что это лучший способ сделать это. Пользователь должен иметь возможность вернуться к редактору и редактировать значения, поэтому движок должен создавать CSS, но он также должен хранить и загружать значения.

Кроме того, размер шрифта и семейство - это просто простой пример, функции настройки могут быть более сложными.

Одна идея состоит в том, чтобы написать код, который создает текст CSS динамически на основе значений в редакторе, что-то вроде:

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

Для загрузки, разобрать текст CSS и получать значения, используя регулярные выражения или что-то подобное.

Но я чувствую, что это не лучший подход.

Answer 1

Я предлагаю использовать МЕНЬШЕ компилятор вместе с 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 массив.