SASS — SCSS. Cómo construir hojas de estilos poderosas y de forma simple

Cuando te sumerges en el desarrollo web, te das cuenta que existen tantas herramientas, que hacen posible que lleguemos a construir sitios y sistemas de alto performance. Ahora bien, en la medida que crece el tamaño de lo que realizamos, también crece la complejidad tanto de la construcción como del mantenimiento.

Toda herramienta que llegue a facilitarnos o ayudarnos en estas tareas es apreciada y ese es el caso de SASS o SCSS.

Pero que es en realidad SASS — SCSS

SCSS o SASS, en una línea es un preprocesador de hojas de estilos CSS. Ajá y eso que significa?. Entonces SASS — SCSS, es una herramienta que nos permite construir archivos de estilos CSS a partir de ciertas reglas, que en general van a facilitar u optimizar la forma en que lo hacemos.

SCSS (A partir de ahora vamos a llamarlo sólo SCSS) posee funcionalidades similares a un lenguaje de programación por lo que vamos o poder automatizar procesos y facilitar la mantenibilidad de nuestros archivos CSS.

Que hace tan interesante el uso de SCSS?

Por tener características similares a las de un lenguaje de programación (sin llegar a serlo, importante tenerlo claro) su uso tiene como objetivo principal, el poder simplificar, optimizar y mejorar la eficiencia en el proceso de creación de los estilos CSS asociados a sitios o sistemas web.

Entonces en SCSS podemos definir variables que nos facilitan el cambio de propiedades de forma rápida, bloques de propiedades repetibles, estilos basados en condiciones (usando la variables indicadas anteriormente), bucles o lazos para construir de forma rápida n clases e incluso aplicar conceptos de programación orientada a objetos, como el caso de la herencia. Veamos esto en detalle.

Instalando SCSS

Para poder usar SCSS, se debe realizar la instalación de la herramienta, este proceso es bien simple y se puede encontrar en detalle en el sitio web de la herramienta.

Instalando SCSS: https://sass-lang.com/install

Usando SCSS

Luego de instalada la herramienta, usar SCSS es tan simple como ejecutar un comando, este comando tomará el archivo origen o fuente en formato SASS — SCSS (recomiendo usar el formato SCSS, por ser bien similar a un archivo CSS) y generará a partir de un proceso de compilación, un archivo CSS.

sass --watch <archivo_origen>.scss <archivo_destino>.css

Declarando y usando variables en SCSS

Como un lenguaje de programación, en SCSS podemos declarar y usar variables que nos van a permitir usar un mismo valor n veces pero también nos va a facilitar el proceso de actualización en caso de requerirlo. Tenemos 2 tipos de variables: simples y arreglos (arrays). La forma como organicemos las variables va a depender de como ellas sean usadas.

Como declaramos estas variables? De forma bien simple, el nombre de la variable debe iniciar en $ y luego debe tener caracteres alfanuméricos sin incluir caracteres especiales. Puedes usar convenciones de nombres como camelCase por ejemplo.

Ejemplo de una variable simple

En la imagen anterior, definimos variables individuales o simples que pueden usarse luego como valores de propiedades, SCSS luego al construir o compilar el CSS sustituirá el nombre de la variable por su valor.

Declaración de variables tipo Array

Acá vemos como podemos agrupar valores en una variable un poco más compleja, que se asemeja al uso de arreglos (arrays) de los lenguajes de programación.

Otra característica interesante de SCSS son los mixins.

Mixins en SCSS

Un mixin es un conjunto de propiedades que se agrupan para crear una entidad. Se podría hacer la analogía con lo que en programación seria un tipo de dato objeto.

Es decir el conjunto de propiedades se usa como un todo, de esta forma podemos definir variables cual objetos que definen propiedades que pueden ser reutilizados. Los mixins aceptan argumentos o parámetros, de esta forma son más flexibles aún.

Definición de un mixin. Pueden o no llevar parámetros

Funciones en SCSS

Al igual que un lenguaje de programación, en SCSS tenemos la posibilidad de definir funciones. Ellas se comportan de manera similar a un mixin, con la particularidad que dentro de la función es posible realizar operaciones que al final retornan un resultado (simple o lista).

SCSS ya implementa algunas funciones de procesos generalmente usados en CSS, como cálculo de colores o transparencias.

Ejemplo de funciones en SCSS

Condicionales en SCSS

Siguiendo la línea de que SCSS tiene funcionalidades de lenguaje de programación, podemos tener la construcción de estilos CSS de forma condicional.

SCSS tiene la funcionalidad if y else, de forma tal que a partir de la evaluación de una condición, sea generado un CSS resultante.

Esta característica es especialmente útil, cuando nuestro sistema web o sitio web debe proveer o habilitar distintas opciones de presentación, de esta forma a partir de un único origen (archivo SCSS) es posible tener diferentes CSS, basado en el cumplimento de las condiciones. Un claro ejemplo de ello es el uso de temas, algo muy popular hoy en día.

Bucles o lazos en SCSS

En SCSS también podemos ejecutar código de forma cíclica, es decir que podemos repetir la construcción de bloques de código CSS de acuerdo a condiciones. Esto es útil cuando a elementos comunes es necesario atribuirles propiedades, mediante esta opción es posible a partir de un único proceso generar las n clases de estilos.

Tenemos los siguientes bucles disponibles: @for y @while, ambos procesos ciclicos siguen la línea de un lenguaje de programación. @for es para realizar repeticiones entre intervalos (repita para) y @while es para ejecutar el proceso mientras se cumple la condición.

Ejemplo de creación de estilos a través de lazos

Herencia en SCSS

Al igual que en lenguajes de programación orientados a objetos (para quien conocer un poco más este tema puede ver este artículo: El paradigma de la programación orientada a objetos).

En SCSS tenemos la posibilidad de aplicar este paradigma, de forma tal que veamos los estilos como clases y que aquellos que sean comunes, los podamos definir en un bloque CSS (clase base), luego heredamos estas propiedades y particularizamos las clases hijas. Con ello ganamos mucha productividad, porque aplicamos un modelo que es extensible.

Importación de archivos

En SCSS tenemos varias posibilidades para hacer inclusión de archivos externos.

Tenemos @use para incluir directamente en el archivo a compilar un archivo parcial.

Podemos usar @forward para incluir un archivo parcial dentro de otro parcial y luego ese parcial con @use poder usarlo en el principal.

Antiguamente se tenía también el @import que se comporta de forma similar, pero ya ha entrado en desuso.

Ejemplo del uso de @use

Usando @forward para incluir un archivo parcial dentro de otro

Usar SCSS para construir estilos es una opción importante, luego que lo conoces y aprendes a usar, entiendes que el proceso de creación y mantenimiento de archivos de estilos puede ser más simple, sobre todo cuando se trabaja con sitios o sistemas de web de gran tamaño.

Espero hayas llegado hasta este punto del artículo y aproveches lo indicado arriba, de forma que sigas mejorando tus destrezas como desarrollador web.