Los preprocesadores CSS son herramientas informáticas que nos permiten convertir un determinado lenguaje a otro tipo de ficheros, conocidos como hojas de estilo en cascada o CSS.
Los más populares y extendidos son LESS, Sass y Stylus.
Por lo tanto lo que realizan es la conversión de un fichero (por ejemplo SCSS) con unas determinadas reglas y programación a otro de tipo CSS compatible con los navegadores.
Nos ofrecen nuevas características que aportan mas versatilidad a la hora de crear las CSS. El resultado es el mismo, pero con una facilidad de construcción y claridad mayor.
Cada preprocesador emplea su propio lenguaje, pero todos ellos exportan a CSS válido. Todos ellos, poseen un lenguaje muy similar al CSS, pero ampliando sus funcionalidades.
El objetivo de todos ellos es generar un CSS compatible y acorde a la especificación.
La sintaxis es mas limpia, gracias a que se trabaja con contenido anidado. Posee una mejor gestión de ficheros, y de reutilización de código. Poseen mayor flexibilidad y mantenimiento. Como inconveniente diría, que es necesario preparar un entorno de trabajo (no siempre) para su uso lo que conlleva tiempo y aporta algo de complejidad inicial a su uso.
Comparativa entre dos de los mas extendidos Sass y LESS
¿Cuál de los dos mas conocidos es mejor?
Me quedo con Sass, pero LESS posee ciertas ventajas respecto a Sass.
Instalación.
Es igual de complicado instalar Sass y Less.
Sass requiere de Ruby.
Less dispone de una versión del lado de cliente en Javascript para trabajar sin necesidad de disponer nada en el lado del servidor.
Gestión de errores.
Sass es mas estricto en determinadas circunstancias dejando menor margen de error al programador.
Los errores del compilador en less son mas informativos e útiles.
Sintaxis.
Sass es mas consistente, posee mecanismos para construcción de estructuras condicionales, iteraciones, bucles, etc.
Anidamiento
Sass ofrece ventajas respecto a Less porque permite anidar variaciones de una misma propiedad y compuestas.
Variables y tipos de datos
Sass proporciona “lists” y “maps”, con capacidad de gestión avanzada mediante funciones predefinidas.
Less posibilita reglas y selectores como un tipo de variables. Permite además variables de variables e interpolaciones adicionales.
Operaciones y unidades
Sass genera al ser mas estricto más errores.
Less presupone que la primera unidad des la que tiene prioridad en cualquier operación.
Funciones predefinidas
Ambos poseen un set bastante amplio.
Documentación
Less ofrece una mejor documentación y selector de búsqueda.
Frameworks
Bootstrap soporta ambos.
Los dos lenguajes ofrecen herramientas potentes, pero su elección quedará determinada por nuestras preferencias. Si queremos flexibilidad o libertad es preferible Less, si deseas ser mas estricto Sass.
Para poder trabajar con estos preprocesadores CSS es necesario disponer de un servidor web similar a Apache.
Es necesario disponer de node.js para instalar otros componentes para trabajo con less y sass. Una vez instalado, dentro de node se puede instalar Grunt, para realizar de forma repetitiva determinadas tareas, como la compilación del fichero LESS o Sass se cree el fichero o ficheros CSS. Con Grunt nos ahorramos trabajo.
Estos programas se instalan desde una terminal o cmd.
Si tenemos instalado node, teclearíamos node –v
Una vez comprobada su funcionamiento, instalamos Grunt
sudo npm install –g grunt-cli -> Instalamos GRUNT
Después si quisiéramos usar Sass, tendríamos que instalarlo (less no es necesario).
La instalación de Sass se realiza desde Ruby on rails.
Para comprobar que tenemos ruby instalado, desde una terminal:
ruby –v ->> En un entorno mac o gnu Linux, seguramente lo tengamos de serie instalado.
Sudo gem install sass -> Es necesario usar el gestor de paquetes de ruby gem.
Una vez instalado node, tendremos que configurar grunt, para ello existe un fichero llamado gruntfile.js donde se puede configurar su funcionamiento. Ojo también una vez instalado grunt, existirá al lado un fichero package.json, con las dependencias necesarias que podemos terminar de instalar ejecutando npm install
Otra capacidad existente es la posibilidad de recargar el navegador automáticamente para comprobar los cambios de Grunt, para ello tendremos que instalar un plugin para nuestro navegador. Este plugin es capaz de entender las llamadas de Grunt, el nombre es LiveRoad (para Chrome ,Firefox, …). El navegador se encargará de escuchar las ordenes de Grunt. Es necesario que dentro del fichero gruntfile.js se deje la opción dentro de watch, livereload a true.
Por ejemplo, en CSS cuando queremos anidar o crear reglas realizamos un código de la siguiente forma
div a {}
div p {}
El código en preprocesador seria:
div
{ a{}
p{}
}
Vemos en este minúsculo ejemplo que no tenemos que repetir estructuras heredadas, y la visibilidad es mejor, entre otras muchas cosas mucho mas profesionales.
Los Mixings son herramienta que nos permite combinar propiedades de diferentes estilos. Se crea una regla de CSS a partir de un selector, una vez creado el selector, podremos hacer uso de el en otro selector. Es similar a la herencia en OPP. Si existe código que se comparte se puede usar también extends, pero mediante los mixins nos ofrece mas potencia que los extends, para no tener que repetir el uso de propiedades.
Mediante el uso de variables, podemos realizar reemplazos programáticos de la CSS. Mediante las estructuras de control, podemos agilizar la construcción de selectores.
No solamente podemos trabajar de forma monitorizada con ruby con less o sass, sino que podemos emplear herramientas convencionales u online.
Para LESS, desde la web lesscss.org/usage/#online-less-compilers
Disponemos de compiladores less online (sugerencias) y editores GUI para less
Para Sass
Existen aplicaciones GUI y modo comando.
Este otro enlace inferior nos muestra una utilidad para trabajar con less, Sass y Coffescript desde Visual Studio.
www.mindscape.com/products/web-workbench
La aplicación Koala es un GUI para Less, Sass, Compass y Coffescript, y puede ser ejecutada en cualquier plataforma.
Para Sass existe otra denominada scout
Como compiladores online existen otros 2 bastante conocidos para Sass como son:
Otra es sassmeister.com
En resumen, LESS y Sass nos van a permitir ahorrar tiempo en la construcción de proyectos trabajando con el Frontend donde empleemos CSS. El resultado es el mismo si trabajamos sin estos preprocesadores, pero la claridad y legibilidad de construcción, las herramientas disponibles para acelerar, ahorrar tiempo y construir la CSS sumado a la optimización , nos llevará a ser mas productivos y organizados.
