SASS y LESS : El presente de CSS

Está Escrito:

Porque la paga del pecado es muerte, mas la dádiva de Dios es vida eterna en Cristo Jesús Señor nuestro.(Romans 6:23)

 Tomado de: Maquetando

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// Variable $primary-color: hotpink; // Mixin @mixin border-radius($radius) {     -webkit-border-radius: $radius;     -moz-border-radius: $radius;     border-radius: $radius; } .my-element {     color: $primary-color;     width: 100%;     overflow: hidden; } .my-other-element {     @include border-radius(5px); }

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// Variable !primary-color= hotpink // Mixin =border-radius(!radius)     -webkit-border-radius= !radius     -moz-border-radius= !radius     border-radius= !radius .my-element     color= !primary-color     width= 100%     overflow= hidden .my-other-element     +border-radius(5px)

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.

1	sudo su -c "joya instalar sass"

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.

1	gem install sass

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  :

1	sudo gem install sass

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

1	$ sass hoja_estilos.scss archivo_generado.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 :

• CodeKit (Pago)
• Compass.app (Pago, Open Source)
• Hammer (Pago)
• Koala (Open Source)
• LiveReload (Pago, Open Source)
• Mixture (Gratis)
• Prepros (Pago)
• Scout (Open Source)

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

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.