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