Глобальная CSS Color Scheme / Skin

Question

Я создаю сайт с использованием CSS, который должен быть скиновым / брендируемым. С технической точки зрения, для каждой «марки» у меня есть набор из пяти значений цвета в базе данных.

Что я хочу сделать, так это создать CSS-файлы, чтобы цветовая схема всего сайта была унифицирована, а цвета использовались повторно, поэтому я могу изменить значение в одном месте, и оно изменит весь сайт. Концепция будет выглядеть так:

.SiteBaseColor {color: sienna;}

p {font-size: 50; цвет: SiteBaseColor;}

Есть ли способ сделать что-то подобное?

Answer 1

Почему бы просто не написать 6 CSS-файлов? Один для всего содержимого (без схемы-цвета) и один для каждого цвета. Тогда вы просто включаете тот, который вам нужен.

То же самое, если вы сгенерируете его по php, просто сделайте 5 разных точек входа для схем и включите правильную ...

Answer 2

К сожалению, CSS не поддерживает переменные. Вам придется использовать препроцессор CSS, например Меньше или xCSS , или использовать фрагменты PHP:

<? $ourColor = "#FF0000"; ?>

.....
div.content { color: <?php echo $ourColor; ?> }

Answer 3

Если вы хотите исследовать выбор препроцессора (мой фаворит для этого случая), я согласен с Пеккой, но мой выбор будет sass , который, я думаю, мощнее, чем меньше ..

Используя препроцессор css, вы можете написать одно объявление sass-файла, а затем скомпилировать его в 6 различных css-файлов, просто меняя цветовые переменные каждый раз ...

Но если вам нужно вытащить цвета из базы данных, возможно, будет проще использовать фрагменты php в файле css ..