Twitter Flickr Pinterest LinkedIn YouTube Google Maps E-mail RSS
formats

Principales preprocesadores CSS. Ventajas, entorno y enlaces.

Publicado en 8 marzo, 2016, por en Frontend.

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 SassLESS

¿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.

Ruby

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

http://sass-lang.com/install

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.

Koala-app.com

Para Sass existe otra denominada scout

Mhs.github.io/scout-app

Como compiladores online existen otros 2 bastante conocidos para Sass como son:

Codepen.io/pen

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.

Etiquetas:, ,

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Home Frontend Principales preprocesadores CSS. Ventajas, entorno y enlaces.
© www.palentino.es, desde el 2012 - Un Blog para compartir conocimientos ...

Uso de cookies en mi sitio palentino.es

Este sitio web utiliza cookies para que tengamos la mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de la política de cookies

ACEPTAR
Aviso de cookies