Instalar y configurar un entorno virtual con Django y Compass para utilizar SASS
septiembre 26, 2011 at 9:51 am | Blog, Django, Sass, virtualenv | No comment
Guía breve para instalar y configurar Django + Compass bajo un entorno virtual en Archlinux.
En primer lugar me parece una herramienta indisplensable VirtualEnv y la utilidad virtualenvwrapper, que nos permitirá tener nuestros entornos de desarrollo separados para cada proyecto. Por lo tanto lo primero es instalarlo:
sudo pacman -Sy python-virtualenvwrapper
Una vez descargado e instalado, vamos a configurar el entorno creando la carpeta ~/.envs y añadiendo a nuestro ~/.bashrc las líneas
export WORKON_HOME=~/.envs
source /usr/bin/virtualenvwrapper.sh
Refresca la terminal (source ~/.bashrc) y ya podemos empezar a utilizar nuestros entornos separados. Fácil ¿no?
Vamos a crear un primer entorno:
mkvirtualenv -p /usr/bin/python2.7 --no-site-packages nombre
El parámetro -p nos permitirá indicarle qué versión de Python debe usarse, útil si tienes versiones más antiguas en servidores en producción que no puedes actualizar y debes instalar el entorno de desarrollo con las mismas características. El otro parámetro –no-site-packages indica al entorno que no utilice el directorio site-packages general del sistema operativo. Con eso tendremos entornos limpios y verdaderamente independientes. Por último se le indica el nombre del entorno.
Hecho eso nos movemos a nuestro entorno simplemente con:
workon nombre
Ya está. Si te fijas, el prompt habrá cambiado a algo parecido a (nombre)usuario@maquina ~ $, el (nombre) denota que estamos dentro del entorno virtual. Vamos a empezar a instalar programas:
pip install django hg+https://bitbucket.org/slafs/django-compass
Añadimos django-compass a nuestras INSTALLED_APPS y para utilizar compass y poder generar nuestro css a partir de SASS vamos a instalar ruby
sudo pacman -S ruby
Y configurarlo para que instale las gemas en el directorio de nuestro entorno virtual, añadiendo al archivo ~/.envs/postactivate las líneas:
export GEM_HOME=$VIRTUAL_ENV/gems export GEM_PATH=""
A continuación, salimos y volvemos a entrar al entorno para que tenga en cuenta los últimos cambios: esto se hace con los comandos “deactivate” y “workon nombre” de nuevo. Y ya podemos instalar las gemas compass y compass-less-plugins (que me parece un maravilloso framework para poder obtener diseños “responsivos”)
gem install compass compass-less-plugin
Hay un problemilla con compass-less-plugin y es que creo que no se registra correctamente, así que vamos a ~/.envs/nombre/gems/compass-(version)/frameworks y creamos la carpeta less, dentro de ella pegamos las carpetas stylesheets y templates de ~/.envs/nombre/gems/compass-less-plugin-(version).
Y ahora tenemos que configurar compass para que trabaje en las carpetas que queramos:
~/.envs/nombre/gems/bin/compass create -r less estilos --using less mv estilos/sass sass mv estilos/config.rb config.rb rm -rf estilos
Abre config.rb y adáptalo a la configuración particular de tu proyecto. Configuraremos también el settings.py de nuestro proyecto añadiendo algo como:
COMPASS_INPUT = os.path.join(SITE_ROOT, 'static_media', 'sass') # adáptalo COMPASS_OUTPUT = os.path.join(SITE_ROOT, 'static_media', 'css') # adáptalo COMPASS_STYLE = 'compact' COMPASS_EXECUTABLE = '/home/javi/.envs/nombre/gems/bin/compass'
Por último, sólo queda arrancar el servidor de pruebas y poner compass en modo vigilante para compilar los cambios que hagamos a los archivos .scss automáticamente:
En una terminal: python manage.py runserver En otra: python manage.py compass watch
Fuentes:
Este artículo se basa en la estupenda exposición “Responsive web design with Django, Compass and the Less framework“, de Idan Gazit en la DjangoCon 2011
Entradas similares:
- Generar distintos CSSs para versiones de escritorio y móvil con SASS
En los últimos trabajos que he realizado he utilizado “diseños sensibles” (responsive design en inglés) para que las webs se adaptaran a los dispositivos en los que iban a ser... - Si no se sirven los estáticos, seguramente es porque no hay aplicación para servir estáticos
Vamos con uno de esos problemas estúpidos que te hacen perder una cantidad de tiempo impresionante. Ahora mismo llevaba desde las 8 intentando resolver un problema relacionado con el estupendo FeinCMS y...