Introducción a Sass: CSS con superpoderes

Desde hace algún tiempo que los preprocesadores de CSS han tomando gran relevancia en el quehacer diario de los diseñadores y desarrolladores web. En la búsqueda de mejorar los flujos de trabajo existentes y realizar más rápido algunas funciones que se repiten a lo largo de la maquetación de un sitio y/o aplicación web con este tipo de herramientas se puede salvar tiempo valioso que puede ser invertido para mejorar otras características de los proyectos.

En este post nos enfocaremos en uno de los preprocesadores CSS más populares Sass, descubriremos algunos conceptos básicos así como su instalación y configuración.

Fundamentos de los Preprocesadores CSS

Por si mismo CSS es una tecnología muy útil; pero para sitios web grandes y aplicaciones complejas se vuelve común que la complejidad y tamaño de las hojas de estilo vaya en incremento. Agregar a esto un lenguaje declarativo que esta en continuo aumento de su complejidad y las cosas se empiezan a poner algo complicadas. Con la llegada de CSS3 vinieron también los prefijos y diferentes specs que continuamente cambian y toman un tiempo en ser definitivos.

Es aquí donde un preprocesadores puede ser de mucha ayuda, ya que nos permite hacer cosas como:

• Utilizar variables para almacenar valores que se pueden reutilizar.
• Anidar declaraciones CSS.
• Separara CSS preprocesado en archivos independientes para un fácil mantenimiento y al final concatenar todo en un simple archivo.
• Crear mixins para reutilizar snippets comunes de CSS.
• Mantener el CSS preprocesado simple, sin caer en repeticiones.
• Mejorar el mantenimiento de proyectos y equipos grandes.

Como los navegadores web solo pueden entender CSS, un preprocesador te da los beneficios de todas esta lista, hace un poco de magia y al final genera un archivo CSS estándar que los navegadores pueden entender sin problemas.

¿Por qué elegir Sass?

Existen varios preprocesadores CSS. LESS, Stylus y Sass son los más populares. Particularmente preferimos Sass por cuestiones del stack de desarrollo que utilizamos en Activ. La mayor parte de los sitios dinámicos que trabajamos actualmente están basados en Ruby y Sass de igual forma esta escrito en ese lenguaje por lo que trabaja bien en esos ambientes de desarrollo.

Si la aplicación esta hecha en Sinatra, Rails, o alguno de los tantos generadores Ruby de sitios estáticos, entonces se puede preprocesar Sass directamente sin entran en procesos adicionales con la línea de comandos.

LESS y Stylus son buenos preprocesadores CSS basados en Node.js. Si estuvieramos desarrollando aplicaciones Node.js, probablemente Stylus sería una buena opción debido a que contiene la mayoría de las características existentes en Sass. También se podría utilizar LESS pero se extrañan algunas de las características presentes en Sass hoy en día.

Breve Historia de Sass

Sass ha estado entre nosotros aproximadamente desde 2006, que en “años web” suena a toda una eternidad. Hampton Catlin es el creador original de Sass (y de Haml, un preprocesador de HTML). Nathan Weizenbaum después tomo el liderazgo del proyector y a últimas fechas Chris Eppstein se unió al proyecto y ambos han estado manteniéndolo desde entonces.

NOTA: Solo para aclarar siempre se utiliza «Sass,» nunca «SASS» o «SaSS». El no hacerlo podría resultar en que Chris, Nathan o Hampton se aparezcan para corregirte.

Doble Sintaxis

Sass

Cuando Sass se creo originalmente existía una sola sintáxis dentro de Sass, también conocida como sintaxis indentada con la extensión de archivos .sass dicha sintaxis fue creada para ser más simple y legible siendo posible escribir CSS sin; o {}.

Un plus (o quizá no tanto, dependiendo cómo se le mire) es que se depende de los espacios en blanco, esto quiere decir que se puede mezclar entre tabulaciones y espacios para indentación y Sass forzará tu indentación para que sea consistente. Un Sass escrito de esta manera de vería así:

SCSS

Poco después una segunda sintaxis fue introducida, refiriéndose a ella como «SCSS» o sintaxis «Sassy CSS» que utiliza la extensión .scss. Esta sintaxis es la favorita de los diseñadores o desarrolladores web que van comenzando con Sass, simplemente se escribe como un CSS “estándar”, es fácil de adoptar y no depende de la indentación. Un ejemplo de la sintaxis SCSS se vería:

La sintaxis SCSS también es preferida por muchos debido a que puedes tomar un archivo plano CSS, cambiar su extensión de .css a .scss, y automáticamente tendremos un archivo SCSS válido. Esta es una forma muy sencilla de convertir un sitio web existente a Sass.

Ambos tanto la sintaxis original de Sass como la versión SCSS se compilaría en un CSS normal que se vería de la siguiente forma:

Instalación, configuración y más

En definitiva Sass es un tema que puede darnos para mucho rato y seguramente veremos la forma de seguir compartiendo nuestra experiencia con todos ustedes. Para los que están interesados en entender la instalación y configuración hace poco dimos una pequeña conferencia alusiva al tema, el material de la misma incluye el proceso de instalación y configuración de Sass así que los invitamos a revisar dicha presentación completa:

Esperamos haya sido de su agrado este pequeño material, parte del mismo esta basado en un artículo de Adobe DevNet bajo licencia CC, próximamente publicaremos algunos tips para mejorar su flujo de trabajo con esta tecnología que permita ayudar a explotarla al máximo.