2013-11-26 4 views
1

Итак, скажем, у меня много таблиц стилей на сайте Django. Файлы CSS и JS находятся под static/ либо в каталоге приложения, либо в каталоге глобального сайта (если это общий файл). У меня разные цветовые темы, связанные с разными страницами, только изменение некоторых значений цвета в таблицах стилей.Использование разметки Django в CSS

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

Очевидно, что, находясь в статическом каталоге, я не могу отправить переменные контекста этим файлам (они не вызывают запрос на представление Python), поэтому здесь возникает проблема: как я могу массово изменять повторяющиеся значения цвета в CSS с использованием Django?

+0

Является ли файловая система для чтения или записи только для чтения? – Brian

+0

Это rwx. Зачем? – gchiconi

+0

(некоторые системы, особенно Google, не позволяют читать/статические и не позволяют писать где-нибудь.) – Brian

ответ

3

Вы можете использовать CSS property of cascading в свою очередь! Не храните цвета в таблице стилей, вы можете указать их в своем стиле <head>. Например:

<head> 
<link rel="stylesheet" type="text/css" href="xxx"/> 
<style> 
body 
{ 
    background-color: {{ colour }}; 
} 
</style> 
</head> 

Цветовая переменная может быть установлена ​​как глобальная в ваших представлениях. Или еще лучше, определите класс, список или словарь с различными цветами, которые вы хотите использовать. Здесь много вариантов. Я думаю, что я бы на

Colours={'Grey': ['#999', '#ccc', '#ddd'], 'Blue': ['#00f', '#77f', '#aaf']} 

Теперь, если вы хотите субстраницу быть синим вы отправляете Colours['Blue'] (как Colour в моем примере ниже) в вас контексте и использовать один элемент для цвета фона, один для текста и один для разного:

<style> 
body 
{ 
    background-color: {{ Colour.0 }}; 
    color: {{ Colour.1 }}; 
} 
div.misc 
{ 
    background-color: {{ Colour.2 }}; 
} 
</style> 
+1

Отличное решение. Делает код немного менее портативным, поэтому, если кто-то еще сталкивается с этим ответом, мое предложение состоит в том, что вы создаете трехуровневый шаблон-расширение: базовый шаблон, шаблон, который расширяет ранее (с помощью CSS), третий, который добавляет различные виджеты, если вам нужно, и окончательное расширение на уровне страницы. – gchiconi

Смежные вопросы