2013-11-26 2 views
1

그래서 장고 사이트에 많은 스타일 시트가 있다고 가정 해 보겠습니다. CSS 및 JS 파일은 앱 디렉토리 또는 글로벌 사이트 디렉토리 (공통 파일 인 경우)에 static/에 있습니다. 다른 페이지와 함께 진행되는 다양한 색상 테마가 있으며 스타일 시트 전체에서 일부 색상 값만 변경됩니다.CSS에서 Django 마크 업 사용

각 색상 테마에 대해 하나의 전체 스타일 시트 파일을 사용하는 대신 파일 전체에 걸쳐 여러 번 반복되는 테마에서 하나의 색상을 변경해야 할 때 시간을 절약하고 변수를 사용하고 싶습니다. CSS3 변수는 아직 지원되지 않으며 프로그래머 디자이너가 내려다 보았습니다.

확실히 정적 디렉토리에 있기 때문에 파이썬보기 요청에 의해 호출되지 않는 컨텍스트 변수를이 파일에 보낼 수 없습니다. 그래서 여기에 문제가 있습니다. 어떻게 반복 된 색상 값을 장고를 사용하는 CSS?

+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> 

색상 변수는보기에서 전역으로 설정할 수 있습니다. 또는 더 나은 방법은 사용하려는 다양한 색상의 클래스, 목록 또는 사전을 정의하는 것입니다. 여기에는 많은 옵션이 있습니다. 나는 당신이 당신 맥락에서 (아래에있는 내 예에 Colour로) Colours['Blue']을 보내 블루하고, 배경 색상에 대한 텍스트를 하나 개의 항목을 사용하는 서브 페이지를 원한다면 지금

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

갈 거라고 생각하고 기타 하나 :

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

우수한 솔루션. 코드의 이동성이 약간 떨어 지므로 다른 사람이이 대답을 읽는다면 기본 템플릿, CSS를 사용하여 확장 한 템플릿, 추가로 추가하는 세 가지 템플릿 확장을 제안합니다. 필요한 경우 다른 위젯과 마지막 페이지 레벨 확장을 제공합니다. – gchiconi