Можно ли абстрагировать определения цветовой темы в CSS

Question

У нас есть много изображений, которые на самом деле подобраны на основе цветовой темы (например, синий, красный, серый ...).Мы создаем файлы с общим именем для каждой темы (например, фон, ...), есть ли способ определить цветовую тему в общем месте, чтобы определение можно было абстрагироватьЭто помешало бы мне изменить цветовую тему по всему CSS-файлу.

body {
    background: url('../img/blue/background.png');
    font-size: 13px;
    margin: 0px;
}

Answer 1

Хотя предлагаемые здесь варианты являются жизнеспособными, я бы хотел упомянуть SASS и МЕНЬШЕ

Это два языка расширений CSS, которые, помимо прочего, предоставляют переменные для выполнения такого рода цветных вещей, о которых вы упомянули.

Answer 2

Не изначально в CSS - но вы можете написать несколько скриптов для компиляции CSS-файлов вашей темы из шаблонов с подстановкой переменных.Я бы предложил иметь «макет» и «цвет» CSS.Макет будет согласованным независимо от того, какую тему использует пользователь.Цвет css содержит только те настройки, которые меняются в зависимости от темы.

<style type="text/css">
    @import ulr(layout.css);
    @import ulr(theme_<?= $activeTheme ?>_.css);
</style>

Вы можете использовать такой инструмент, как http://lesscss.org/ (если вам нравится Ruby), для создания своих тематических CSS-файлов.

Мы используем NAnt для чего-то похожего на это (не CSS, а та же идея), и это экономит кучу времени, а не поддерживает несколько файлов, которые отличаются только значениями.

Answer 3

Я не верю, что вы можете с чистой реализацией CSS, поскольку вам нужно будет определить ваши базовые пути для ваших изображений в переменной, которую вы устанавливаете с помощью некоторой логики (оператор switch, if / else if, ..etc.) а затем использовать эту переменную в CSS.

Вот несколько вариантов, о которых я подумал, чтобы сделать это. Если вы создаете псевдо-css-файл с вашей переменной, определенной как строка, которая не встречается в css (например: $ basePath), и создаете все ваши css-правила в этом поддельном css-файле как «$ basePath + image.jpg». Затем с помощью некоторого кода на стороне сервера извлеките файл css и создайте файлы шаблонов css, заменив $ basePath + фактическим базовым путем для этой темы. Код на стороне сервера затем сохранит эти CSS-файлы как theme1.css, theme2.css, ... и т. Д.

Затем вы можете использовать переменные url для переключения между темами, используя некоторый код на стороне сервера, чтобы вставить ссылку на правильный файл темы css.

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

Answer 4

Вы можете создать динамический файл CSS, используя любой серверный язык сценариев, например PHP.

style.css.php:

<?php
header("Content-type: text/css");
$theme = 'blue';
$color1 = '#fefefe';
?>

body {
    background: url('../img/<?=$theme?>/background.png');
    font-size: 13px;
    margin: 0px;
}

.sometext {
    color: <?=$color1?>
}