Dialectos CSS: ¿Cuál pre-procesador es mejor? ¿Sass, LESS o Stylus?
CSS por default tiende a hacer que muchos programadores echen de menos algunas funciones de sus amados lenguajes de programación; dignase variables, bucles, controladores de flujo, herencia y funciones. Afortunadamente para ellos existen los llamados “pre-procesadores” , que podríamos llamarles “dialectos” que toman como base CSS pero con la cualidad de tener todas las características antes mencionadas.
Si bien hay programadores que se toman la tarea de agilizar su flujo de trabajo con sus propios atajos, optar por unos de estos pro-procesadores facilitarán el trabajo en equipo, ya que mas o menos están estandarizados.
En esta ocasión hablaremos de SASS (con su variación SCSS), LESS y Stylus, que si bien no son los únicos, si son de los más populares. Hay que remarcar que esto no se trata de un concurso de ver quien es el mejor, simplemente es citar sus pros y contras en cada uno de los entornos, por lo que en ciertos proyectos o personas, usar uno puede ser más tentador que otro.
LESS
Pros
- Es el más fácil de aprender, ya que su sintaxis es muy similar a la de CSS
- Para usarlo existen 2 caminos:
- A) Agregar un archivo javascript, y enlazar nuestros archivos .less como si fueran los CSS de toda la vida. El navegador se encargará de compilar el código.
- B) Usar un compilador como codekit, la terminal de comandos o un editor/compilador como Crunch!. que exporta el código de LESS a CSS normal.
- Es ideal para trabajar en proyectos con NodeJS como backend.
- Muchos temas de worpress, frameworks de CSS usan LESS.
Detalles
- Optar por el camino “A” de usar javascript para compilar LESS, generalmente hace más lenta la carga del sitio.
Enlace: LESSJS.
SASS (y su primo “SCSS”)
Pros
- Muchos proyectos grandes y frameworks famosos están en SASS (Digase Bootstrap de twitter)
- SCSS permite escribir CSS sin mayores cambios, en cambio SASS permite escribir un código más limpio ya que no te obliga a usar puntos y comas, ni corchetes.
- Existen librerías como “compas” que agilizan mucho el trabajo
Detalles
- Es ligeramente más complejo que LESS
Enlace: SASS.
Stylus
Pros
- Se eliminan los corchetes, punto y coma, dos puntos. Su sintaxis se define por saltos de linea e tabulaciones, similar a Python y Coffeescript.
- Mas también permite escribir código CSS estándar, combinado con el de stylus.
- Existen librerías como nib que te permitirán ahorrarte el escribir prefijos para navegadores como “-webkit-border-box” y similares, entre otras utilizades que agilizan el trabajo.
- Es ideal para trabajar en proyectos con NodeJS como backend.
- Te obliga a organizar bien tu código.
Contras
- Es ligeramente más difícil de aprender que las opciones anteriores
- Es el menos popular de los 3, por lo que no hay tantos frameworks.
- Una vez acostumbrándote al flujo de trabajo de stylus, es difícil programar CSS estándar sin sentir algo de pereza (puede parecer trivial, pero créeme así es).
- Dado que el lenguaje es demasiado libre, el código espagueti puede abundar si no se tiene cuidado.
Enlace: Stylus.
Al final esto es como gustos, y si me preguntan Stylus es una de las alternativas más completas de momento con una filosofía DRY al máximo esplendor, pero SASS y LESS en ciertos contextos son las opciones ideales.
Lo ideal es que si trabajas en proyectos colaborativos conozcas la sintaxis básica de los 3 pseudo-lenguajes y no te termines casando con ninguna de las tecnologías mencionadas.
