Porque usar un pre compresor css como Sass o stylus

Durante la semana pasada me vi forzado a volver a usar css y recordé el porqué tomé la decisión de cambiar de escribir css puro a utilizar un pre compresor de css como stylus o sass, una de las grandes ventajas que me vino a la mente fue y mi principal motivación a usar estas tecnologías fue la mantenibilidad del código, debido a que su escritura es más limpia y en muchos de los casos permite un desarrollo mucho más rapido veamos un ejemplo utilizando  css vs sass

El" class="redactor-autoparser-object">https://gist.github.com/362597... código anterior seria el usado para estilizar una etiqueta ‘a’ que se encuentra dentro de una lista de la forma tradicional, la version de sass se realizaria de la siguiente forma.

Como" class="redactor-autoparser-object">https://gist.github.com/362608... podemos ver la sintaxis es un poco más corta, como es habitual en los nuevos lenguajes la sintaxis es indentada y las principales diferencias entre los dos códigos son: solo debemos escribir una sola vez el selector css para li como para a, y las para la opción de hover nos referimos a la etiqueta 'a' con un & seguido de dos puntos y el selector especifico a esta ultima función se le conoce como anidación (nesting).

Otra muy buena característica que posee es el uso de variables, pensemos que un tipo de color va ser usado frecuentemente en el estilo de la página pero es muy difícil aprendernos muchos colores y más si estos son escritos de este modo RGB o HEX

Al" class="redactor-autoparser-object">https://gist.github.com/362632... compilar el codigo anterior tendriamos un codigo css como el siguiente:

En" class="redactor-autoparser-object">https://gist.github.com/362633... el código css podemos observar que la variable $blue es reemplazada por el código del color HEX y en la linea que se le aplica la propiedad darken es oscurecida un 9% con respecto al color original. Por otro lado tenemos el uso de mixin las cuales son funciones creadas por nosotros para generar código css al ser compilado:

Se" class="redactor-autoparser-object">https://gist.github.com/362646... puede ver que @mixin floaty es una función la cual recibe dos parámetros uno con un valor obligatorio y $side posee el valor left por defecto, y se crea dos invocaciones de esta función pasando diferentes parámetros los cuales generan los siguientes css de salida.

Después" class="redactor-autoparser-object">https://gist.github.com/362651... de la compilación vemos que cada una de las invocaciones produjo un css diferente debido a los parámetros lo cual puede ser muy funcional en el caso que queramos que dependiendo de unas condiciones se despliegue un estilo u otro.

Estas son unas de las principales ventajas que posee un pre compresor de css, los cuales nos ayudarán en el tiempo que tomamos al usar estilos, escribirlos de una forma mantenible y por supuesto reutilizable, pero son las más básicas, otras características son la creación de sprites dinámicos, eliminar el uso de prefix entre otras de las cuales hablaremos más adelante.