Comenzamos con este artículo el Manual de Sass, en el que vamos a explicarte las bases para que puedas usar Sass y beneficiarte de todas las ventajas de los preprocesadores CSS. Sass es el más usado de los preprocesadores y una de los requisitos habituales que encontrarás en ofertas de trabajo.

En este manual te explicaremos la sintaxis de Sass y el uso en el marco del desarrollo de sitios web, de modo que puedas automatizar la traducción del código Sass a código CSS estándar. Pero antes de ponernos con el propio Sass conviene darnos un poco de tiempo para aclarar qué son los preprocesadores CSS.

Qué son los preprocesadores CSS

Los preprocesadores CSS son herramientas para los desarrolladores de sitios web, que permiten traducir un código de hojas de estilo no estándar, específico del preprocesador en cuestión, a un código CSS estándar, entendible por los navegadores.

Los preprocesadores básicamente nos ofrecen diversas utilidades que a día de hoy no se encuentran en el lenguaje CSS, o bien no son compatibles con todos los navegadores. Ejemplos pueden ser variables, anidación de selectores, funciones (denominadas mixins), etc.

Al desarrollar con un preprocesador se consigue principalmente un ahorro de tiempo, ya que tenemos que escribir menos código para hacer las cosas. Pero también conseguimos una mayor facilidad de mantenimiento del código, gracias a una mejor organización del código y la posibilidad de editar una vez ciertos valores y que afecten a decenas, o cientos, de lugares del código CSS generado.

No todo son ventajas cuando hablamos de preprocesadores, ya que nos obligan a aprender un nuevo lenguaje y escribir código no estándar. Ese código no estándar debe ser compilado en CSS, lo que afecta también al flujo de desarrollo. El código del preprocesador no lo entiende el navegador y por lo tanto nos tenemos que dar el trabajo de traducirlo, antes de llevar un sitio web a producción. Afortunadamente, ese flujo está bastante depurado y existen diversas alternativas para la optimización de esa traducción, de modo que no tengamos que intervenir manualmente y nos ahorre tiempo.

Por qué Sass

Cualquier preprocesador es perfectamente válido. Podríamos sin duda elegir otras alternativas como Less o Stylus y estaría estupendo para nosotros y nuestro proyecto, ya que al final todos ofrecen más o menos las mismas utilidades. Pero sin embargo, Sass se ha convertido en el preprocesador más usado y el más demandado.

Al haber recibido un mayor apoyo de la comunidad es más factible que encuentres ofertas de trabajo con Sass o que heredes proyectos que usan Sass, por lo que generalmente te será más útil aprender este preprocesador.

Además, varios frameworks usan Sass, como el caso de Bootstrap. Por ello, si tienes que trabajar con ellos te vendrá mejor aprender Sass.

Cómo es la sintaxis de Sass

Como decimos, la tarea de aprender Sass se divide en dos bloques principales. Primero aprender a trabajar con el código de Sass y conocer su sintaxis especial. La segunda tarea sería aplicar Sass en tu flujo de trabajo, de modo que puedas usar el preprocesador fácilmente y no te quite tiempo el proceso de compilación a CSS. Veremos las dos partes en este primer artículo del Manual de Sass, comenzando por examinar su sintaxis.

Obviamente, no vamos a poder explicar la sintaxis de Sass en unas pocas líneas. Para eso tenemos el manual completo, pero queremos comenzar dando algunos ejemplos para que veas cómo es.

Lo primero que debes conocer de Sass es que existen dos tipos de sintaxis para escribir su código:

• Sintaxis Sass: esta sintaxis es un poco diferente de la sintaxis de CSS estándar. No difiere mucho. Por ejemplo, te evita colocar puntos y coma al final de los valores de propiedades. Además, las llaves no se usan y en su lugar se realizan indentados.
• Sintaxis SCSS: Es una sintaxis bastante similar a la sintaxis del propio CSS. De hecho, el código CSS es código SCSS válido. Podríamos decir que SCSS es código CSS con algunas cosas extra.

En la práctica, aunque podría ser más rápido escribir con sintaxis Sass, es menos recomendable, porque te aleja más del propio lenguaje CSS. No solo es que te obligue a aprender más cosas, sino que tu código se parecerá menos al de CSS estándar y por lo tanto es normal que como desarrollador te sientas menos "en casa" al usar sintaxis Sass. En cambio, al usar SCSS tienes la ventaja de que tu código CSS de toda la vida será válido para el preprocesador, pudiendo reutilizar más tus conocimientos y posibles códigos de estilo con los que vengas trabajando en los proyectos.

Como entendemos que al usar un preprocesador es preferible mantenerse más cerca del lenguaje CSS, en este manual usaremos siempre sintaxis SCSS.

Ahora veamos algunas cosas sobre la sintaxis de Sass. Por ejemplo, el uso de variables.

$color-fondos: #F55;

h1 {
  background-color: $color-fondos;
}

En este código estás viendo cómo declaramos una variable y a continuación la usamos en un selector. Obviamente, eso no es un CSS válido, ya que no existen este tipo de declaraciones en el lenguaje.

Una vez compilado el código anterior, obtendrías un código estándar como el siguiente:

h1 {
  background-color: #F55; }

Veremos más sobre variables y muchas otras utilidades de Sass en breve. Pero ahora preferimos dedicar algo de tiempo para explicarte cómo puedes usar Sass en tu proyecto.

Cómo usar Sass

Para usar Sass tienes dos alternativas fundamentales.

1. Preprocesar con alguna herramienta de interfaz gráfica, como el caso de Prepros, CodeKit o Scout-App. En principio puede ser más sencillo, ya que no requiere trabajar con la línea de comandos, pero necesitas usar un programa en concreto y no siempre puede estar disponible para ti, o no integrarse en otro flujo de trabajo que puedas tener ya asumido en tu proyecto. Además, las mejores herramientas de interfaz gráfica tienen la desventaja de ser de pago, o necesitar una licencia para desbloquear todo su poder.
2. Usar la línea de comandos para preprocesar. Esta es la opción preferida por la mayoría de desarrolladores. No sólo porque no requiere la compra de una licencia por el software de interfaz gráfica, sino principalmente porque la puedes integrar con todo un ecosistema de herramientas para optimizar multitud de aspectos en un sitio web. Además, está al alcance de cualquier desarrollador, ya que todos tenemos un terminal en nuestro sistema operativo y finalmente, permite personalizar completamente el comportamiento del preprocesador.
3. Usar herramientas de automatización. Como tercera opción es muy común también usar herramientas que permiten automatizar el flujo de trabajo frontend, compilando archivos CSS, Javascript, optimizando imágenes, etc. Nos referimos a paquetes como Gulp, Grunt o Webpack (aunque este último es más un empaquetador). Estos sistemas tienen la particularidad que sirven para cubrir todas las necesidades de trabajo con los lenguajes de la web y no solamente se usan para compilar el código Sass. Sería la opción más potente de las tres comentadas, aunque requiere mayor formación para poder usarlas. En este grupo también podríamos unir a PostCSS, aunque esta herramienta solamente nos sirve para convertir el CSS, aplicando diversos plugins, entre los que podría estar la compilación de Sass, y no entra en áreas como el Javascript.

Las anteriores alternativas pueden marear un poco si no estás acostumbrado a oir acerca de tantas tecnologías. No te preocupes demasiado porque vamos a irnos a una opción sencilla que te permita comenzar a usar Sass, sin demasiado esfuerzo ni configuración. En concreto te vamos a explicar ahora a usar Sass desde tu terminal, con las herramientas "oficiales" del propio preprocesador (la alternativa planteada en el punto 2 anterior). Es una posibilidad al alcance de cualquier lector. Nuestro siguiente paso entonces será comenzar por instalar el preprocesador.

Instalar Sass

La instalación de Sass depende del sistema operativo con el que estás trabajando. Aunque todos requieren comenzar instalando el lenguaje Ruby, ya que el compilador de Sass está escrito en Ruby.

Veamos, para cada sistema, cómo hacernos con Ruby.

• Windows: Existe un instalador de Ruby para Windows. https://rubyinstaller.org/ Puedes usarlo para faciltar las cosas.
• Linux: tendrás que instalar Ruby usando tu gestor de paquetes de la distribución con la que trabajes, apt-get, yum, etc.
• Mac: Ruby está instalado en los sistemas Mac, por lo que no necesitarías hacer ningún paso adicional.

Una vez instalado el lenguaje Ruby tendremos el comando "gem", que instala paquetes (software) basados en este lenguaje. Así que usaremos ese comando para instalar Sass. De nuevo, puede haber diferencias entre los distintos sistemas operativos.

Windows

Tendrás que abrir un terminal, ya sea Power Shell, "cmd" o cualquiera que te guste usar. Si no usas ninguno simplemente escribe "cmd" después de pulsar el botón de inicio. Luego tendrás que lanzar el comando.

gem install sass

Linux

Para instalar Sass, una vez tienes Ruby anteriormente, podrás hacerlo con el siguiente comando en tu terminal.

sudo gem install sass --no-user-install

Mac OS X

En Mac usarás generalmente "sudo", igual que en Linux. Aunque puedes probar antes sin sudo y usar sudo si realmente te lo pide la consola por no tener los suficientes permisos.

sudo gem install sass

Para cualquier sistema, una vez instalado Sass, podemos ver si realmente está disponible, haciendo el siguiente comando:

sass -v

Eso nos debería devolver la versión de Sass instalada en nuestro sistema.

Compilar archivos de Sass a CSS

Ahora que tienes Sass instalado querrás compilar el código de Sass para convertirlo a CSS estándar. Para ese paso, necesitamos partir de un archivo con código Sass.

Antes en este artículo hemos visto cómo podría ser un pedazo de código en Sass, con sintaxis SCSS. Puedes copiar ese código y guardarlo en un archivo en tu ordenador. Usa cualquier carpeta para hacer esta primera prueba y guarda el archivo con el nombre "ej.scss" (o cualquier otra cosa que te apetezca).

Ahora te debes situar con el terminal en la carpeta donde tengas el archivo que acabas de crear con el código SCSS. Entonces lanzarás el comando para compilar, de esta manera:

sass ej.scss ej-compilado.css

Como puedes observar, al comando "sass" le indicamos el archivo origen (con código SCSS) y el archivo de destino, donde nos colocará el código CSS estándar.

Podrás observar también, una vez ejecutado el comando, que nos crea el archivo "ej-compilado.sass". Además que ha creado un archivo ej-compilado.css.map, que sirve para que el navegador pueda corresponder (en las herramientas de desarrollo) el código compilado con la referencia donde está el código original, permitiendo ayudarte a la hora de depurar. Hablaremos de mapas más adelante, de modo que no necesitas preocuparte de ese segundo archivo ".map".

Compilar Sass de manera automática con un "watcher"

Habrás observado lo rápido que se ha compilado el archivo Sass para convertirse en código CSS estándar. Pero sin embargo, ejecutar ese comando para compilación cada vez que cambia tu código es un poco tedioso, porque te obliga ir a la consola y lanzar nuevamente el comando con cada pequeña edición que hagas.

Lo que generalmente querrás es tener un vigilante "watcher" que se encargue de compilar automáticamente el fichero cada vez que guardes el archivo original. Así, tu código compilado estará siempre fresco y podrás ahorrar unos segundos preciosos con cada compilación. Al cabo del día significará mucho tiempo y optimizará tu trabajo, haciéndote más feliz.

Paralelamente, el watch nos permite observar un archivo en concreto, o todos los archivos de una carpeta.

Vigilar las modificaciones de un archivo en concreto

Lo consigues con la opción --watch, indicando el archivo origen y destino, igual que hacíamos antes.

sass --watch origen.scss destino.css

Vigilar todos los archivos de una carpeta

En este caso puedes decirle a Sass la carpeta de origen y la carpeta de destino, donde colocará el código CSS estándar. Separas la carpeta origen de la carpeta de destino con el caracter dos puntos ":".

sass --watch carpetaorigen:carpetadestino

Ten en cuenta que esas carpetas existirán en tu proyecto y que el comando lo debes invocar desde la raíz del proyecto.

Ya los nombres de las carpetas podrán variar según tus preferencias. Para comenzar, si no tienes ningún requisito en este sentido, te sugerimos crear dos carpetas. Una llamada "sass" donde colocarás tu código fuente, con archivos de extensión ".scss". Otra llamada "css", donde se colocará el código compilado.

El esquema de carpetas sería parecido a esto:

Ahora, lanzarás el watcher con un comando como este (Situado en la raíz del proyecto, donde has visto que está el archivo index.html).

sass --watch sass:css

Una vez que crees código SCSS en la carpeta "sass", se irán generando los archivos compilados en la carpeta de destino. Por ejemplo, así te quedaría la estructura de archivos y carpetas al crear tu código Sass en la ruta "sass/estilo.scss".

cuando abordemos la organización del código mediante diversos archivos fuente de SCSS, explicaremos cómo puedes evitar que se compilen todos los archivos de Sass y sólo se compile uno de ellos, el raíz. Te adelantamos que puedes evitar que el watcher los procese simplemente nombrando esos archivos con un guión bajo en su inicio. Algo como "_variables.css".

Usar los archivos de código generado

Como hemos dicho, el código SCSS no es compatible con los navegadores, por lo que tenemos que usar el código compilado. Esto quiere decir que, en tu index.html, así como en cualquier otro archivo HTML de tu proyecto, tendrás que enlazar con el código generado y nunca con el código fuente Sass.

Por tanto, en el index.html que has visto en las anteriores imágenes, tendríamos que enlazar con la hoja de estilos compilada, de esta manera:

<link rel="stylesheet" href="css/estilo.css">

Si has hecho todo bien, deberías ver como te pilla los estilos generados y funciona todo perfectamente.

Con esto ya has aprendido a dar los primeros pasos con Sass y has hecho lo más difícil, crear un entorno de desarrollo amigable, que permita la compilación automática de los archivos Sass cada vez que vamos introduciendo cambios.

Ahora nos queda aprender bien el lenguaje y sacarle todo el partido, manteniendo las buenas prácticas. En los próximos artículos del manual iremos abordando todos los puntos que debes saber, así como otras aproximaciones para compilar Sass que te pueden venir bien en otros casos.

Cómo aprender Sass

Ovbiamente, estamos produciendo este manual para que puedas aprender Sass desde DesarrolloWeb.com. Iremos agregando nuevos artículos para completar los temas básicos que debes saber para usar Sass en tus proyectos. Pero además, ten siempre a mano la propia documentación de Sass, que te servirá como una vía rápida de despejar tus dudas.

Además, si quieres aprender de manera rápida y completa, también te queremos recomendar el Curso de Sass de EscuelaIT. Son 5 horas de clase en la que aprenderás no solo a preprocesar, sino las mejores prácticas para sacarle el mejor partido al preprocesador y organizar el código de tu proyecto.