Sass динамичные цвета с переполнением стека
Я хочу добавить поддержку в моей панели администратора для изменения цвета макета по умолчанию. Пример:
$color: #333; // I will get this color from DB
background-color: $color
Я прочитал немного о Sass, и я могу сделать это, используя его? Я не хочу создавать 7 style.css с разными цветами установлены.
Возможно? Я знаю, что могу создать «style.php» и установить CSS-заголовок для содержимого, но я не такой.
Решение
Такие вещи, как SASS и LESS, являются CSS-препроцессорами, что означает, что вы можете использовать в них переменные, но они обрабатываются, и вы включаете недавно выведенный файл CSS в ваш HTML.
Для того, что вы пытаетесь достичь, вы можете использовать переменные на стороне сервера для переопределения CSS. Лично я нахожу такие методы грязными, но это сработает для того, чего вы пытаетесь достичь.
Так, например, если вы разработали свой макет, чтобы иметь этот CSS:
.myBlock {
background-color: blue;
}
И вы включили его в свой HTML:
<link rel="stylesheet" type="text/css" href="mylayout.css">
После этого вы можете использовать PHP для динамического построения переопределения:
<link rel="stylesheet" type="text/css" href="mylayout.css">
<style>
<?php
$overrides = ['.myBlock' => 'background-color: blue;'];
foreach ($overrides as $class => $css) {
echo($class.' {'.$css.'}');
}
?>
</style>
Визуализированный HTML после обработки на стороне сервера будет выглядеть так:
<link rel="stylesheet" type="text/css" href="mylayout.css">
<style>
.myBlock {background-color: blue;}
</style>
Из-за природы CSS это последнее определенное правило, которое будет использоваться браузером.
Другой подход, и, возможно, более чистый, заключается в использовании JSON и Javascript. Вы можете взять массив данных на стороне сервера, используя PHP, и JSON закодировать его для вывода. Затем, используя Javascript, вы можете применить цвет. Например:
<script>
var colors = <?php echo(json_encode($colorData)); ?>;
$('.myElement').css('background-color', colors['myElement']);
</script>
Другие решения
Других решений пока нет …