Sass VS LESS VS Stylus: ¿Qué pre-procesador de CSS es mejor?

b2ap3_thumbnail_SaSS_LESS_Stylus

Si tienes algo de experiencia en el desarrollo de sitios web es probable que hayas tenido muchos dolores de cabeza trabajando con hojas de estilos CSS, esto, sobretodo porque son muy difíciles de mantener ordenadas y al no ser propiamente un lenguaje de programación tienen limitantes como el no poder utilizar variables, funciones, realizar operaciones matemáticas, etc.

La buena noticia es que no eres la única persona con ese problema y algunas de ellas ya se han dedicado ha desarrollar soluciones para este problema y así es como nacen los pre-procesadores CSS:

¿Qué son los pre-procesadores CSS?

Son aplicaciones que procesan cierto tipo de archivos para crear hojas de estilos con algunas de las ventajas de un lenguaje de programación común como el uso de variables, funciones, condiciones, la posibilidad de hacer cálculos  matemáticos  y que además te permiten utilizar una sintaxis mucho más sencilla e intuitiva.

Hay muchos pre-procesadores, cada uno con sus ventajas, sin embargo para fines de este artículo me enfocaré en los 3 más populares: SassLESS y Stylus.

Sass VS LESS VS Stylus

1. Instalación

Tanto Sass como LESS y Stylus están escritos para funcionar en distintas plataformas.

Sass funciona con Ruby el cual viene pre-instalado en Mac, sin embargo en Windows necesitarás instalar Ruby para poder empezar a usar Sass. Por otro lado para poder utilizar Sass tendrás que utilizar la terminal o la línea de comandos lo que vuelve algo complicada la tarea(para algunos).  Existen varias herramientas visuales para facilitar este proceso pero en general tienen un costo.

En el caso de LESS al estar escrito en JavaScript la instalación es tan sencilla como importar la librería de JavaScript a tu documento HTML, además, también existen algunas herramientas, muchas de ellas gratuitas, que ayudan a compilar tus archivos escritos en LESS.

Stylus requiere para su instalación de NodeJs el cual que tiene su propio proceso de instalación y al igual que Sass requiere de trabajo desde línea de comandos para instalar y compilar documentos. Por otro lado las herramientas visuales para ello son más escasas que sus 2 competidores.

Conclusión: Para cuestiones de instalación LESS es la mejor opción.

2. Sintaxis

Tanto Sass como LESS utilizan la sintaxis estándar de CSS por lo que es bastante sencillo convertir una hoja de estilos al formato de Sass o LESS. La pequeña diferencia es que Sass utiliza la extensión .scss y LESS utiliza la extensión .less.

Como verán no hay ninguna diferencia con un CSS regular. Este ejemplo funciona tanto para Sass como para LESS.

Para el caso de Sass, este también acepta una sintaxis un poco más antigua que omite las llaves y el punto y coma:

Para el caso de Stylus la sintaxis es un poco más compleja. Stylus acepta la sintaxis CSS estándar, pero también acepta algunas otras variaciones donde las llaves, dos puntos y puntos y comas son opcionales. Por ejemplo:

La extensión de los archivo stylus es .styl.

Como verán ningún formato ofrece una ventaja real sobre el otro salvo la posibilidad de escribir el código omitiendo ciertos elementos. Bajo este criterio podríamos declararlo un empate, sin embargo, siendo un poco más estricto y en mi muy personal opinión una sintaxis menos abierta (sin ser demasiado restrictiva por supuesto) ayuda a tener códigos más claros y elegantes y facilitan la futura lectura del mismo. Es decir, considero que los ganadores son: Less y SASS.

3. Variables

Las variables pueden ser declaradas y utilizadas a lo largo de la hoja de estilos. Ustedes pueden guardar cualquier valor CSS (ej: colores, números o textos) y referenciarlo en cualquier parte del código.

Sass

En Sass las variables se declaran como en PHP agregando el símbolo de moneda ($) antes del nombre de la variable y asignando el valor por medio del signo de dos puntos “:“. Cada declaración de una variable se termina con un punto y coma, es decir, la misma sintaxis que CSS.

LESS

En LESS las variables se asignan de la misma forma que en Sass excepto que en vez del uso del signo de moneda hay que agregar el símbolo arroba “@” antes de cada variable.

Stylus

En Stylus las variables no requieren que se agregué ningún símbolo, sin embargo si se permite el uso del símbolo $. De igual forma el punto y coma no es necesario pero si un signo de igual entre la variable y el valor. Como dato Stylus (0.22.4) compila correctamente si agregan el símbolo de @ en el nombre de una variable, pero no aplicará el valor cuando se haga referencia al mismo por lo que hay que evitarlo.

Cabe mencionar que todos los ejemplos arriba compilan el mismo CSS:

Conclusión: Al igual que el tema de la sintaxis no hay ninguna ventaja real entre ninguno de los lenguajes salvo las restricciones que, repito, en mi muy personal opinión ayudan a tener un código más claro. De nuevo los ganadores: LESS y Sass.

4. Código anidado

Un problema común al generar hojas de estilo CSS es cuando se tienen múltiples elementos con el mismo padre y lo tedioso que puede ser estar escribiendo el nombre del objeto padre una y otra vez:

Para ello, por medio de los pre-procesadores, podemos escribir los selectores de los hijos dentro del elemento padre y  se puede, además, utilizar el símbolo & para referirse al mismo.

Tanto Sass como LESS y Stylus tienen la misma sintaxis para elementos anidados:

Una vez compilado este código devolverá el mismo código CSS del ejemplo inicial de este punto:

Conclusión: Los 3 lenguajes son igualmente buenos.

5. Mixins

Los “mixins” son como una especie de función de un lenguaje de programación, están te permiten reutilizar algunas propiedades en la hoja de estilos y modificarlas según los parámetros que recibe la misma. Esto puede ser útil para modificar o reutilizar rapidamente los estilos de un sitio solo modificando los parámetros. Ejemplo:

Sass

LESS

Stylus

Para todos los ejemplos de arriba el código compilado es el mismo:
Conclusión: En cuanto al uso de “Mixins” las 3 tecnologías son igual de buenas.

6. Herencia

Cuando escribes un hoja de estilos y quieres aplicar el mismo estilo a varios elementos los escribes de la siguiente forma:

Esto es una excelente solución hasta que tenemos que modificar una propiedad específica de un elemento lo cual empieza a ser un problema cuando nos damos cuenta de lo desordenada que tenemos nuestra hoja de estilos. Para ello, cada uno de los pre-procesadores tiene su forma de lidiar con esta situación:

Sass & Stylus

Para ambos casos al compilar se generaría el siguiente código CSS:

LESS

Para el caso de LESS también puedes utilizar las herencias pero en el momento de compilar, en vez de crear aplicar los mismos estilos a múltiples clases repite cada uno de los elementos-

En este caso el código se compilaría de la siguiente forma:

Como verán en el caso de LESS no genera un código CSS óptimo ya que no agrupa las herencias, por lo tanto los ganadores para este caso son: Sass y Stylus.

7. Importación

En un documento CSS común la importación de archivos es posible, sin embargo no es la práctica más recomendada ya que requiere hacer múltiples peticiones HTTP lo cuál no es una forma óptima para lograr una carga rápida. Los pre-procesadores CSS por su parte cargan los distintos archivos importados y lo compilan en un solo archivo.

Es importante recalcar (como mostraremos en el ejemplo) que si se importa un archivo .css común este no se importará al documento resultante si no se que se mantendrá con la instrucción de “import”:

Sass, LESS y Stylus

Para el ejemplo el archivo compilado se vería de la siguiente forma:
Como verán la importación es igual para todos por lo que no hay ningún ganador(o todos lo son).

8.Funciones de Colores

Las funciones de colores sirven para transformar el color en el momento de la compilación. Estos son bastante útiles para crear degradados, obscurecer un botón al pasar el mouse, etc.

Sass

Estas son solo alguna de las funciones de colores de Sass. Te recomiendo leer la documentación de Sass para conocer más funciones.

Las funciones de color pueden utilizarse en cualquier lugar donde el color sea una propiedad CSS válida. Aquí un ejemplo:

LESS

Estas son solo alguna de las funciones de colores de LESS. Te recomiendo leer la documentación de LESS para conocer más funciones.

Aquí un ejemplo de como puedes usar una función de color con LESS:

Stylus

Estas son solo alguna de las funciones de colores de Stylus. Te recomiendo leer la documentación de Stylus para conocer más funciones.

Aquí un ejemplo de las funciones de color en Stylus:

Conclusión: En cuanto a funciones de colores las 3 opciones cuentan con suficientes funciones para las necesidades más importantes por lo que no hay ningún ganador.

9. Operaciones

Tanto Sass como LESS y Stylus permiten hacer operaciones matemáticas de la misma forma. La principal diferencia es que LESS es menos restrictivo a la hora de permitir operaciones entre distintas unidades. Por ejemplo, en LESS esta operación es válida:

100px + 2em = 102px (?)

Para este ejemplo en Sass y Stylus generaría un error de compilación lo cual, según mi criterio(que es debatible) me parece es lo correcto para evitar errores de dedo en tu hoja de estilos.

Sass, LESS, & Stylus

10. Media Queries

La mayoría de las personas que trabajamos con @media queries ponemos las mismas siempre al final de la hoja de estilos, esto es un problema ya que desconecta los estilos que estas trabajando lo que vuelve tu código más difícil de leer/mantener:

Con Sass o LESS puedes poner esos estilos anidándolos a la clase:

Además, con Sass puedes usar un pequeño truco llamado “respond-to” (código de Chris Eppstein, Ben Schwarz, y Jeff Croft) para llamar los media queries de una forma más clara.

Así puedes usarlo de una forma más clara:

Como verán el claro ganador de este rubro es: Sass.

Conclusión:

Las 3 tecnologías son muy poderosas y cualquiera te ahorrará trabajo, sin embargo tomando en cuenta todas las variables expuestas aquí considero que la mejor tecnología es Sass aunque no por un margen realmente claro lo que me podría hacer cambiar de idea en el futuro.

¿Ustedes que opinan?

Sobre el autor Ver todos los artículos Sitio web del autor

Alfonso Bribiesca

Alfonso Bribiesca

Ingeniero, soñador, emprendedor, geek, prolife y eterno estudiante. Creo que todo en la vida sigue un patrón. Fundador de @vexilo, @wizache y @rubiqom

3 comentariosDejar un comentario

  • Muy interesante la explicación de las diferencias, de hecho apenas estoy viendo sobre los preprocesadores en un curso que me encontré en la web, de momento estoy viendo Stylus llevo poco moviéndolo y si está muy interesante, le dotan de muchas funciones interesantes de las que carece CSS como uso de funciones (Mixins), variables y muchas más que se extrañaban en CSS por no ser un leguaje de programación sino uno de estilos.

    Muy bien explicado el artículo me fue muy útil muchas gracias!

  • Un poco tendenciosa la opinión en lo particular uso SASS pero la verdad es que Stylus ofrece más opciones y eso de que algo sea más “elegante” por escribir más entonces Java es el rey de la elegancia.

Leave a Reply

Tu correo no será publicado. Los campos requeridos estan marcados con *