Uno de los preprocesadores CSS por excelencia es Sass. Pero... ¿Qué es un preprocesador? Como su propio nombre indica, un preprocesador es una herramienta que se encarga de procesar el código ANTES de que el navegador lo haga.
Gracias a eso, podemos escribir código Sass, que no es más que CSS con algunos añadidos (bucles, funciones, etc...), de modo que podamos escribir menos código y de forma más concisa.
¿Qué es Sass?
Sass es uno de los preprocesadores más populares que se ha establecido como preprocesador CSS por excelencia. Aunque muchas de sus innovaciones y características han terminado añadiéndose en CSS, aún hoy en día incorpora ciertas ventajas que aún no existen en CSS nativo.
Instalación
Utilizar es sencillo, sobre todo si utilizamos Vite. Lo único que debemos hacer es:
- 1️⃣ Instalar el paquete
sass. - 2️⃣ Alternativamente, el paquete
sass-embededpuede ser mejor para entornos «no-JavaScript». - 3️⃣ Reemplaza la extensión de los archivos
.csspor.scss. - 4️⃣ En tus archivos
.html,.csso.js, importa el archivo.scssen lugar de.css.
¡Listo! Recuerda que HTML o Javascript no permite ni reconoce la importación de ficheros .scss, sin embargo, si utilizamos vite y tenemos el paquete de Sass instalado, se encargará de hacer la tarea por nosotros.
Así pues, instalamos el paquete de Sass necesario:
$ npm install -D sass
Y ahora nos aseguramos de importar los archivos .scss en nuestros archivos HTML/CSS/JS:
<!-- Si lo queremos importar desde un HTML -->
<head>
<link rel="stylesheet" href="./styles.scss">
</head>
/* Si lo queremos importar desde un CSS/SCSS */
@import "./styles.scss";
// Si lo queremos importar desde un JS/TS
import "./styles.scss";
Características de Sass
Una de las ventajas de Sass es que simplemente cambiando la extensión de .css a .scss ya estará funcionando. Esto ocurre porque Sass es compatible con CSS, y simplemente añade mejoras que poco a poco y de forma progresiva puedes ir añadiendo para adaptar tu código.
| Característica | Descripción | Disponible en CSS |
|---|---|---|
| Variables | Posibilidad de guardar valores en variables reutilizables. | ✅ CSS Custom Properties |
| Nesting CSS | Posibilidad de anidar estilos dentro de otros. | ✅ CSS Nesting |
Módulos (@use) | Crear pequeños ficheros reutilizables. Reemplazo de partials. | 🟧 @import (pero hace peticiones extra) |
| Mixins | Bloques de código CSS reutilizables. | ❌ Propuesta: Mixins |
| Funciones | Bloques de código CSS que devuelven un valor. | ❌ Propuesta: Funciones |
| Bucles | Posibilidad de repetir bloques de código e iterar. | ❌ Sólo bucles simples con contadores |
| Condicionales | Posibilidad de realizar condiciones. | ❌ Propuesta: if / ✅ @supports / @media |
Ajustes sass:color | Manipulación de colores para crear variaciones. | ✅ Función color-mix() |
| Cálculos matemáticos | Posibilidad de realizar operaciones y cálculos. | ✅ Función calc() y otros |
Como puedes ver, muchas de las características principales de Sass se han ido implementando en CSS nativo y mejorando con funcionalidades adicionales. Sin embargo, Sass aún tiene casos de uso donde es interesante, sobre todo cuando necesitamos preprocesar el código y realizar cambios en el CSS que tenemos escrito.
Módulos Sass
Un buen ejemplo de ello es la regla @use. Con ella, se puede importar un archivo CSS externo y que forme parte del archivo CSS final. De esta forma, podemos dividir el código en múltiples partes para que sea mucho más sencillo para nosotros trabajar con CSS.
Observa el siguiente archivo index.scss que contiene varias reglas @use para importar pequeños ficheros .scss con el contenido de secciones específicas de nuestro sitio:
@use "./fonts.scss";
@use "./header.scss";
@use "./main.scss";
@use "./footer.scss";
La herramienta Sass leerá cada archivo por separado y construirá un archivo .css final con el contenido de cada uno de esos ficheros .scss. Al final, el navegador leerá un único archivo index.css con todo el contenido (una descarga).
Esto, con CSS nativo es muy complicado de hacer. Aunque utilicemos la regla @import, la diferencia es que el navegador no une ese código CSS en un sólo archivo final como hace con Sass, sino que realiza las peticiones de las múltiples partes desde el navegador en cada petición:
@import "./fonts.css";
@import "./header.css";
@import "./main.css";
@import "./footer.css";
En este caso, el navegador realizaría 4 descargar de ficheros .css individuales, procesándolo uno detrás del otro. Esto, en algunos casos, podría ofrecer una desventaja desde el punto de vista del performance.
Mixins
Los mixins permiten crear pequeñas agrupaciones de código CSS que podemos reutilizar en nuestros proyectos. Por ejemplo, observa el siguiente fragmento de código donde creamos un mixin rounded-box para establecer un estilo generalizado para nuestros elementos:
@mixin rounded-box($radius: 50px) {
border-radius: $radius;
border: 2px solid black;
padding: 1rem 2rem;
margin: 1rem;
}
.container {
@include rounded-box(25px); // border-radius: 25px;
}
.element {
@include rounded-box; // border-radius: 50px;
}
En el día a día se ha terminado por adoptar composición por medio de las clases de utilidad, más conocido hoy en día gracias a Tailwind CSS.
Funciones
Por otro lado, observa como se realizan funciones en Sass. En este caso hemos creado una función que se encarga de generar los estilos de los botones, recorriendo un array y añadiendo un color más oscuro si es necesario:
- 1️⃣ Creamos la función usando la regla
@function/@return. - 2️⃣ Definimos una variable
$colorscon un array de colores. - 3️⃣ Con
@eachrecorremos el array de colores. - 4️⃣ Generamos una clase
.button-red,.button-blue, etc... - 5️⃣ Con
@if/@elsepodemos realizar condiciones.
@function darken-color($color, $percentage) {
@return darken($color, $percentage);
}
$colors: red, blue, green, orange;
@each $color in $colors {
.button-#{$color} {
background-color: $color;
border: 0;
padding: 0.5rem 1rem;
@if $color == red {
color: white;
} @else {
color: black;
}
box-shadow: 0px 4px 6px darken-color($color, 10%);
}
}
<button class="button-red">It's me, Manz!</button>
<button class="button-blue">It's me, Manz!</button>
<button class="button-green">It's me, Manz!</button>
<button class="button-orange">It's me, Manz!</button>
Como puedes ver, Sass puede llegar a ser muy útil si actualmente requieres utilizar módulos Sass, funciones, bucles, condicionales y/o mixins en CSS. En caso contrario, quizás lo aconsejable sería utilizar CSS nativo para ello. Por otro lado, si lo que necesitas es un Sass pero más potente y personalizable, echa un vistazo a PostCSS.
