Cómo usar SASS y LESS con Django

Públicado en


Usar SASS y LESS dentro de un proyecto Django de forma fácil y rápida no es tan complicado de hacer. Ambos transpiladores de CSS son aún muy populares entre lo desarrolladores web, y a muchos les es más cómodo trabajar las hojas de estilo a través de alguno, hacer esto si eres Django developer no es algo complicado.


Primero hay que entender que tanto SASS como LESS requieren de la instalación de programas ajenos a python, si no quieres complicarte las cosas, lo sencillo es instalarlos en el sistema operativo, dejo los links de ambas documentaciones abajo para que veas como instalarlos.


http://lesscss.org/

https://sass-lang.com/install


Les adelanto que si tienes instalado "npm" se instalan así.


npm install -g sass
npm install -g less

Para integrar esto con Django, tenemos que instalar un paquete llamado django-compressor:

pip install django_compressor

Agregar un setting al archivo de settings.py dependiendo de cual necesitas.

COMPRESS_PRECOMPILERS = (

  ('text/less', 'lessc {infile} {outfile}'),

)

ó

COMPRESS_PRECOMPILERS = (

  ('text/sass', 'sass {infile} {outfile}'),

)

En el template un ejemplo de cómo debes agregar compress con los tag de css:

{% load compress %}

{% compress css %} <link href="{% static 'less/my-style.less' %}" rel="stylesheet" type="text/less"> <link href="{% static 'sass/more-style.sass' %}" rel="stylesheet" type="text/sass"> {% endcompress %}

La propiedad type especificando el tipo "text/less" y "text/sass" es indispensable para que el transpilador funcione. Compress no va a minificar los archivos css en modo debug, sólo lo hará en producción.

Ahora ya solo es cuestión de comenzar a trabajar en sus estilos para dejar el sitio bonito. Si quieren saber más acerca de la librería de django-compress comparto el link a la documentación oficial.

https://django-compressor.readthedocs.io/en/stable/



Jesus Armando Anaya
Jesus Armando Anaya

Soy programador por profesión y por afición, me gusta estar aprendiendo, participar en comunidades, y buscar excusas para viajar lejos.


blog comments powered by Disqus