Sass: Qué es? y Cómo se Utiliza?

Sass es un preprocesador CSS mediante el cual podrás escribir código CSS de un modo más eficiente. Si eres un desarrollador web, seguramente ya hayas escuchado hablar de él y es más, a día de hoy su uso es un requisito en la mayor parte de ofertas de empleo.

Sass es un preprocesador es una aplicación que compila el código escrito en un lenguaje determinado y lo transforma en otro. Sass es un preprocesador CSS, es decir, que coge el código programado en otro lenguaje (Sass, SCSS) y lo transforma en código CSS. Lo ideal sería poder utilizar directamente el código programado en otro lenguaje, pero lamentablemente los navegadores solamente entienden código CSS.

Con Sass te ahorrarás bastante trabajo a la hora de cambiar ciertos estilos en tus proyectos. Por ejemplo, imagínate que tienes un color definido en múltiples lugares de tu hoja de estilos. Si quieres cambiarlo, tendrás que buscar el color y cambiarlo en todos los lugares en los que aparece.

Sass agrega una gran cantidad de posibilidades frente a las hojas de estilos CSS convencionales. Entre ellas están las siguientes:

Archivos parciales: SCSS permite definir archivos parciales; estos comienzan por un guión bajo, como por ejemplo el archivo _parcial.scss. Estos archivo se compilarán como parte del archivo principal, dando un solo archivo CSS como resultado. De nuevo, esto permite organizar mejor el código. Los parciales se importan gracias a la función @import.
Definiciones anidadas: En CSS cada elemento del cual se definen estilos incluye sus propiedades entre dos llaves, una de apertura y otra de cierre. Además de esto, con SCSS es posible definir elementos anidados en el interior de otros elementos, de tal modo que no sea necesario escribir el selector completo del elemento o de la clase anidada. Esto permite ordenadar mejor el código.
Definición de variables: Con SCSS puedes guardar valores CSS en variables. Por ejemplo, puedes almacenar un color y repetirlo todas las veces que quieras en la hoja de estilos. En caso de que quieras cambiar dicho color en el futuro, bastará con que cambies el color una sola vez. Las variables se escriben con el símbolo del dólar delante: $variable.
Inclusión de mixins: Los mixins son conjuntos de propiedades CSS que puedes incluir en cualquier clase o elemento, de modo que no sea necesario repetir siempre las mismas propiedades. Puedes definir mixins gracias al identificador @mixin.
Extensión: Sass también permite extender cualquier elemento gracias a la propiedad @extend. Por ejemplo, podías tener la clase .viviendas con ciertas propiedades y a su vez tener también la clase .casas como extensión de .viviendas.
Operaciones matemáticas: Sass también permite realizar ciertos cálculos en los archivos SCSS, incluyendo varios operadores aritméticos.

Instalación de Sass en Windows

Ruby no viene instalado por defecto en Windows, por lo que antes de que instales Sass, tendrás que instalar Ruby. Puedes instalar Ruby en Windows siguiendo estos pasos:

Accede a la Web de Ruby y descarga el instalador de Ruby. Escoge la versión recomendada para tu sistema operativo, ya sea la x86 si tu versión de Windows es de 32 bits o la x64 si tu sistema operativo es de 64 bits. la versión se Ruby será la misma independientemente de que utilices Windows 8, Windows 10 o cualquier otra versión de Windows.
Seguidamente, haz clic en el instalador que has descargado para iniciar la instalación de Ruby. Acepta las condiciones y haz clic en «Next».
Es recomendable que selecciones las opciones que el instalador marca por defecto. En especial, no te olvides de marcar la opción que añade los ejecutables de Ruby al path del sistema. Luego haz clic en «Next».
Luego, aunque no es indispensable, deberías seleccionar también la opción que sirve para instalar el MSYS2 development toolchain. Luego haz clic en «Next» para iniciar la instalación.
Cuando finalice la instalación de Ruby se abrirá una ventana de símbolo del sistema que servirá para instalar MSYS2, si es que has marcado antes la opción. Puedes escoger entre tres opciones. Sencillamente pulsa INTRO y espera a que finalice la instalación.

Una vez hayas instalado Ruby, abre una ventana de terminal o de símbolo del sistema e introduce comando ruby -v para asegurarte de que se ha instalado correctamente.

Seguidamente, instala Sass mediante el siguiente comando, que tendrás que ejecutar en modo administrador:

gem install sass

Tras unos segundos, Sass debería estar ya instalado en tu sistema.

Cómo compilar archivos SASS

Vamos a crear un directorio; puedes darle cualquier nombre. En mi caso crearé un directorio «tutorial-sass» en mi directorio de proyectos. Puedes hacerlo desde la interfaz de tu sistema operativo o desde la línea de comandos:

mkdir  tutorial-sass

Luego crea el archivo estilos.scss en su interior desde la interfaz de Windows, desde tu IDE o desde la línea de comandos, como prefieras:

touch estilos.scss

Ahora edita el archivo estilos.scss y agrega el siguiente código de ejemplo:

$text-color: #e2777a;
$background-color: #272822;

.area {
  background-color: $background-color;
}

p {
  font-color: $text-color;
}

Si intentas incluir este archivo .scss tal y como está en la sección head de un archivo html, no funcionará, ya que tenemos que compilarlo a CSS. Durante el proceso de compilado, las variables $text-color y $background-color se reemplazarán por sus respectivos valores tanto en el caso de la etiqueta p como en el caso de la clase .area.

Para compilar el archivo desplázate hasta el directorio en el que estás usando al terminal de comandos:

cd proyectos/tutorial-sass

Compilación automática: sass watch

Agregando el flag --watch al comando sass podrás hacer que el archivo .css se genere cada vez que modifiques el archivo .scss. De este modo no necesitarás ejecutar el comando cada vez que quieras compilar un archivo:

sass --watch estilos.scss:estilos.css

Como salida del comando verás que se muestra algo así, indicando que la compilación automática está en funcionamiento:

> > > Sass is watching for changes. Press Ctrl-C to stop.

Si realizas cualquier cambio en el archivo se detectará un cambio, por lo que si observas la terminal podrás ver lo siguiente:

> > > Change detected to: estilos.scss

        write estilos.css
        write estilos.css.map

Organización del código con Sass

Algunos desarrolladores incluyen un directorio llamado css para los archivos .css y otro directorio llamado sass para los archivos .scss. Otros configuran Sass para que los archivos resultantes estén en un directorio llamado dist, que es en donde reside el proyecto final. Sin embargo, otros prefieren crear un directorio llamado src y situar ahí los archivos SCSS. Lo importante es que separes ambas cosas, que sigas la misma filosofía en cada proyecto y que además tengas los archivos a mano.

Lo único que podríamos decir que es imprescindible es que los archivos .scss parciales comiencen por un guión bajo:

css/
- estilos.css
sass/
- estilos.scss
- base/
  - _mixins.scss
  - _variables.scss
- componentes/
  - _menu.scss
  - _buttons.scss
  - _header.scss
  - _footer.scss
- secciones/
  - _principal.scss
  - _proyectos.scss
  - _blog.scss
  - _contacta.scss

El archivo SCSS principal del proyecto sigue siendo el archivo estilos.scss, en el que tenemos que importar todos los archivos .scss del proyecto. Cuando importes los archivos no tendrás que escribir ni el guión bajo antes de su nombres ni al extensión de los archivos, dado que es algo que Sass ya espera encontrarse. Aquí tienes el archivo SCSS correspondiente a la estructura anterior:

// Base

@import 'base/mixins';
@import 'base/variables';

// Componentes

@import 'componentes/menu';
@import 'componentes/buttons';
@import 'componentes/header';
@import 'componentes/footer';

// Secciones

@import 'secciones/principal';
@import 'secciones/proyectos';
@import 'secciones/blog';
@import 'secciones/contacta';

Existen muchos otro método que te permitirá compilar código Sass. En el mundo de JavaScript es habitual compilar muchos otros elementos para que tu navegador pueda comprender el código, como por ejemplo código TypeScript, React, Svelte o Vue. Debido a ello suelen utilizarse aplicaciones que automatizan todos estos comandos, como por ejemplo Grunt o Gulp, que es algo que veremos en otros tutoriales. Y esto ha sido todo.