SASS y LESS : El presente de CSS

less-vs-sass-its-time-to-switch-to-sass-by-Zing-Design

A medida que la web sigue avanzando más personas están recurriendo a los pre-procesadores CSS (si sigues escribiendo CSS puro me temo que  estas perdiendo la mitad tu vida detrás de ese ordenador)   hoy hablaremos de LESS y SASS ,  no hay duda de que ambos son los preferidos por la comunidad, tambien esta stylus pero lo abordemos en otro post .

¿Que es un pre-procesador 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.

El objetivo de estos preprocesadores es tener un código más sencillo de mantener y editar. Los preprocesadores incluyen características tales como variables, funciones, mixins, anidación o modularidad.

SASS

sass

SASS se desarrolla en 2007 (si desde 2007 hay pre-procesadores, muchos los descubrimos años despues) , SASS ha convertido en el pre-procesador mas utilizado – y por una buena razón. A pesar de que ha existido durante casi una década los desarrolladores detrás SASS siguen ampliar su funcionalidad .

SASS sobresale al utilizarse con frameworks como Compass y Bourbon , ya que estos anexan la funcionalidad que quizá SASS debería tener de forma nativa.

Sintaxis

SASS permite el uso de dos sintaxis diferentes para crear sus archivos. La primera, conocida como SCSS (del inglés, Sassy CSS) .

Además, SCSS es capaz de entender la mayoría de hacks de CSS y la sintaxis específica de los navegadores, como por ejemplo la vieja sintaxis filter de Internet Explorer. Obviamente esta sintaxis básica de CSS se ha mejorado con las características de Sass.

Los archivos creados con esta sintaxis utilizan la extensión .scss.

La segunda sintaxis, conocida como “sintaxis indentada” o simplemente “sintaxis sass” permite escribir los estilos CSS de manera más concisa. En este caso, el anidamiento de selectores se indica con tabulaciones en vez de con llaves y las propiedades se separan con saltos de línea en vez de con puntos y coma.

Los archivos creados con esta segunda sintaxis utilizan la extensión .sass

Algunos diseñadores consideran que esta segunda sintaxis es más sencilla de leer y más rápida de escribir que SCSS. En cualquier caso, las dos sintaxis tienen exactamente las mismas funcionalidades .

Una de las ventajas de SASS es que los archivos creados con una sintaxis pueden importar cualquier archivo creado con la otra sintaxis. Además, dispones de una utilidad para la línea de comandos que te permite convertir una sintaxis en otra.

Sass incluye las siguientes características:

  • 100% compatible con CSS3.
  • Permite el uso de variables, anidamiento de estilos y mixins.
  • Incluye numerosas funciones para manipular con facilidad colores y otros valores.
  • Permite el uso de elementos básicos de programación como las directivas de control y las librerías.
  • Genera archivos CSS bien formateados y permite configurar su formato.
  • Integración con Firebug gracias a la extensión FireSass.

Instalación

Hay dos formas de utilizar y compilar SASS  la fácil y la difícil.

La “difícil” pero mas potente :

SASS  utiliza el lenguaje ruby por lo que tendremos que tenerlo instalado en nuestras maquinas  :

Linux

Si estás usando una distribución de Linux, necesitaras instalar Ruby desde el  gestor de paquetes apt, rbenv o RVM.

Windows

Antes de empezar a usar Sass tendrás que  instalar Ruby. La manera más rápida para obtener Rubí Windows es utilizar instalador  super rápido.

El programa de instalación también instalará una línea de comandos o  powershell Ruby que permitirá utilizar las bibliotecas de Ruby.

Mac

Instalar SASS  es un proceso bastante rápido si estás usando un Mac, felicitaciones, Ruby viene pre-instalado .

Instalar Sass

La instalación de  SASS se realiza mediante el uso de la línea de comandos:

Abrimos la terminal :

En el Mac e terminal.app viene instalado por defecto,se encuentra ubicado en la carpeta “Utilidades”.

En Windows, ejecuta  cmd.

Linux : bah! ya sabes.

Rubí utiliza gemas para gestionar sus diversos paquetes de código como Sass. En el tipo de ventana de terminal abierta:

Esto instalará Sass y sus dependencia , es bastante mágico. Si recibes un mensaje de error, entonces es probable que tengas que anteponer el comando sudo  :

Doble verificación. Ahora debe tener Sass instalado, pero nunca está de mas la  doble verificación, escribe esto en la terminal :

sass -v

Si la respuesta es Sass 3.4.17 (Selective Steve)    perfecto , hemos instalado SASS , ves no dolió tanto .

Compilar nuestro SCSS a CSS

Ahora compilaremos nuestro archivo SASS a CSS

La gran ventaja de esta forma de utilizar SASS es que es mas potente debido a la cantidad de comandos que tenemos disponibles.

La forma fácil :

Hay un gran  número de aplicaciones que  conseguirán poner a SASS  en marcha y funcionando en unos pocos minutos , existen aplicaciones gratuitas y de pago (algunas merecen el gasto) que nos ayudaran a trabajar con SASS :

Para poder compilar nuestro archivo SCSS por ejemplo en Koala , simplemente lo seleccionamos y convertimos , listo.

SASS es un tema extenso pero hay suficiente material en la web para aprender,   un recurso muy bueno es este Libro Web dedicado a SASS.

less

LESS

Dos años después del lanzamiento de Sass otro CSS pre-procesador llegó a la escena web . LESS nació como una gema para Ruby en  2009 como una alternativa a Sass pero desde entonces ha sido reescrito en JavaScript.

A pesar de que no es mucha la diferencia, algunas personas prefieren usar JavaScript sobre Ruby dicho esto , LESS proporciona una funcionalidad muy similar a la de SASS ,sin embargo, la sintaxis es un poco diferente.

LESS añade comportamiento dinámico a CSS, por ejemplo variables, mixins, operaciones y funciones. LESS puede ejecutarse del lado del servidor (usando Node.js y Rhino) o del lado del cliente (en navegadores modernos).

Sintaxis

LESS proporciona los siguientes mecanismos: variables, anidamiento, operadores, mixins y funciones. La principal diferencia entre LESS y otros pre-procesadores CSS es que LESS permite la compilación en tiempo real.

El ámbito de las variables en LESS es muy similar al de la mayoría de lenguajes de programación. Las variables y los mixins se buscan primero en el ámbito local, si no son encontrados, el compilador buscará en el ámbito inmediatamente superior, y así sucesivamente.

Una pequeña diferencia de SASS es que usa el símbolo @ para las variables, SASS utiliza la $, que es el signo que  SASS utiliza para mixins.

Veamos un ejemplo muy sencillo de LESS :

Como vemos por medio de la anidacion y funciones  podemos evitar reescribir una y otra vez la misma linea en CSS.

Instalación :

Para empezar a utilizar LESS vamos a realizar una tarea muy simple enlazar el archivo less.js y   styles.less en nuestro HTML  :

LESS nos ofrece algunas opciones interesantes  :

Depende de nuestras necesidades utilizar esas opciones , por lo regular solo se utiliza env para producción y desarrollo.

Y por ultimo enlazamos nuestro archivo .less que contendrá todos nuestros estilos :

NOTA :

Mientras trabajemos en el desarrollo del proyecto es recomendable incluir directamente el archivo SASS , para producción siempre sera mejor incluir el archivo CSS compilado y minimizado previamente.

Listo, ya podemos comenzar con LESS , al igual que SASS el tema es muy extenso ,   aqui esta una pagina de referencia en español  para que conozcas toda la funcionalidad de LESS

Conclusión

Ambos pre-procesadores son excelentes alternativas, LESS podría ser mas amigable para comenzar debido a que la sintaxis no es tan  diferente a escribir CSS y no tendriamos que realizar nada en la linea de comandos , pero en lo personal creo que SASS  es mas potente , claro dependiendo el proyecto.

Comments
  1. Carlos Garrido Responder

Leave a Reply

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