Utilizamos los preprocesadores SASS y LESS para optimizar nuestro código CSS
Un preprocesador de CSS es una herramienta que nos permite escribir pseudo-código CSS que luego será convertido a CSS real. Ese pseudo-código se conforma de variables, condiciones, bucles o funciones. Podríamos decir que tenemos un lenguaje de programación que genera CSS.
La idea principal de un preprocesador es la de hacer más con menos, es decir, poder aplicar el concepto de DRY (don’t repeat yourself) en el caso específico de CSS, y obtener un código más escalable y que se pueda reciclar para aplicarlo en distintos proyectos.
Además, estos preprocesadores, nos permiten tener un código más sencillo de mantener ya que incluyen características que lo facilitan como son las variables, las funciones, los mixins, la anidación o modularidad.
Son muchos los preprocesadores que podemos encontrar en la actualidad, pero casi todos tienen características principales comunes. Los más populares son LESS y SASS.
Se suele comenzar usando LESS al considerarse más simple y más sencillo de aprender, mientras que SASS tiene funciones más avanzadas. También hay que destacar que ambos tienen una gran comunidad detrás, cosa que otros no tanto.
Entre las principales ventajas que nos ofrecen están las siguientes:
- Comportamientos dinámicos en el CSS
Podremos utilizar variables, clases, operaciones, sentencias, métodos y funciones, en nuestras CSS. Gracias a las funciones y los mixins podemos evitar escribir código duplicado. También nos servirán para evitar escribir continuamente los prefijos propietarios de cada navegador.
También, por ejempo, al disponer de variables, los cambios nos resultan menos costosos, puesto que nos valdrá con sustituir el valor de una variable para obtener resultados diferentes, lo cual nos supone un ahorro en tiempo y trabajo. - Reutilización de bloques de código.
- Capa de abstracción
Gracias a lo cual no trabajamos directamente sobre nuestro archivo CSS. - Separación absoluta de desarrollo y producción.
- Modulariza el código
Muchos preprocesadores ofrecen la caracerística de importar archivos. En lugar de escribir todo en varios archivos CSS o en uno solo, podemos tener varios archivos preprocesables que se unirán en uno solo que recoge el CSS resultante, que será el que se termina usando en producción en tu sitio web, web-app o proyecto. Así, un gran uso que se puede hacer es utilizarlo para organizar tu CSS y hacerlo más modular. Gracias a esto podremos modularizar nuestros archivos de una forma lógica y sencilla de mantener, teniendo distintos módulos para cada elemento de la web. - Anidación o Nesting
Para cualquiera que entienda de CSS la anidación es otro de los grandes beneficios que es fácil de entender y de aplicar. SASS y LESS permiten anidar los selectores de CSS dentro de otros selectores para así no tener que repetir una y otra vez la clase padre principal cada vez que quieras darle estilo a algo al interior de dicho selector.
Todo esto está genial, pero no debemos olvidar que para usar bien un preprocesador antes se debe saber cómo funciona CSS.
De esta forma, en Solucionex nos decantamos por el uso de estos preprocesadores SASS y LESS para aprovechar al máximo sus beneficios y crear un código CSS final más óptimo para los sitios y aplicaciones web.