Usando una variable Django en un archivo CSS

Estoy tratando de crear un archivo dinámico CSS usando el motor de plantillas Django o de cualquier otro modo.Usando una variable Django en un archivo CSS

Actualmente, tengo una regla CSS que tiene este aspecto:

background-image: url('http://static.example.com/example.png');

Dónde http://static.example.com corresponde a la variable STATIC_URL en Python. Utilizando el motor de plantillas de Django, podría teóricamente escribir algo como esto:

background-image: url('{{ STATIC_URL }}example.png');

Mi pregunta es, ¿cómo puedo usar el sistema de plantillas de Django (o cualquier otro medio) para generar dinámicamente CSS?

Fuente

2011-05-18 Wylie

Es, básicamente, tiene dos opciones:

servir a su CSS de forma dinámica, con una entrada en urls.py, etc., tal como si se tratara de una página HTML. Su archivo de plantilla simplemente será CSS en lugar de HTML, pero usará la sintaxis normal de la plantilla de Django, etc.
Acceso directo: Haga referencia a su imagen de fondo con una ruta relativa. Esto puede o no ser posible para su entorno, pero es una forma conveniente de tener una ruta de acceso de archivo CSS estático diferente dependiendo de dónde esté alojado.

Fuente

2011-05-18 23:58:56 dkamins

Gracias. No creo que el método de ruta relativa sea lo suficientemente robusto para mis necesidades, pero podría funcionar en otra configuración. El primer método funcionaría, pero estoy un poco preocupado por la velocidad. – Wylie

Le puede gustar el decorador de @cache_page: http://docs.djangoproject.com/en/1.3/topics/cache/#the-per-view-cache – dkamins

@Wylie - Puede probar la velocidad, pero probablemente no vaya ser un problema Tengo un archivo 'user.css' que mis páginas hacen referencia que no es un archivo en absoluto, se genera dinámicamente cada vez que se solicita. Pensé en hacer una generación y caché, pero no ha habido razón * de rendimiento * para hacerlo. –

Una muy buena solución aquí es usar django-compressor. En primer lugar, si está sirviendo más de un archivo CSS, el compresor ayudará a mejorar los tiempos de carga de la página al eliminar el número de solicitudes. Un efecto secundario de comprimir/concatenar archivos es que el compresor reescribe urls en el archivo css, por lo que los archivos estáticos relativamente referenciados (por ejemplo ../img/logo.png) se convierten automáticamente en URL completamente calificadas, con la url del archivo estático (por ejemplo, http://static.example.com/img/logo.png).

Alternativamente se puede escribir filtros personalizados para lograr lo que quiere, o, puede comprimir el CSS completamente estático, y algunas partes dinámicas en un solo archivo (por ejemplo, hacer esto en su archivo de diseño de base):

{% compress css %} 
    <link .... /> 
    <style> 
     .some_rule {background-image:{{MEDIA_URL}}/img/logo.png} 
    </style> 
{% endcompress %}

Esto también significa que no tiene que preocuparse por la eficacia, ya que los archivos css/js se generan en el primer acceso de una plantilla que los utiliza y se almacenan como archivos normales en su directorio estático (esto es configurable) , por lo que se sirven como archivos normales y estáticos.

Fuente

2011-05-19 12:07:14 Darb

Gracias por la buena explicación. Esta fue una de las soluciones que encontré al buscar, pero no vi una manera fácil de usarlo. – Wylie

Es una gran herramienta para mejorar el rendimiento, normalmente solo la uso para concatenación, ejecuto un yuicompresor en los archivos css y js de origen en la implementación y concat en diferentes archivos CSS para varios navegadores con peculiaridades (requiere tener middleware de detección de navegador , y variables disponibles en RequestContext para lograr) – Darb

No entiendo cómo funciona ../ en el entorno de desarrollo, pero lo hace. ¿Nadie sabe? –

Usando una variable Django en un archivo CSS

Respuesta

Cuestiones relacionadas