SASS y SCSS: directivas, selectores, funciones y operadores

SASS es un preprocesador de CSS que permite organizar estilos mediante módulos, variables, bloques reutilizables, funciones y estructuras de control. SCSS es la sintaxis que utiliza llaves y punto y coma, por lo que sus ejemplos se parecen a las reglas CSS habituales.

Este artículo reúne las palabras clave, directivas, símbolos y funciones más útiles para reconocer y organizar código SASS/SCSS. Los ejemplos se centran en la sintaxis y en el propósito de cada elemento.

Módulos e importación

Las directivas de módulos permiten distribuir los estilos en varios archivos y decidir qué elementos se comparten entre ellos.

Directiva	Función
`@use`	Carga otro archivo SASS como módulo. Sus variables, funciones y mixins se utilizan mediante un espacio de nombres.
`@forward`	Reexporta los elementos de un módulo para que otros archivos puedan acceder a ellos desde un punto central.
`@import`	Importa archivos SASS, pero esta forma está obsoleta.

Con @use, los miembros importados se consultan mediante el nombre del módulo:

@use 'variables';

.button {
  color: variables.$primary;
}

Un archivo índice puede centralizar las exportaciones de otros módulos:

// _index.scss
@forward 'variables';
@forward 'buttons';

La diferencia práctica es que @use carga un módulo para utilizar sus miembros, mientras que @forward los vuelve a exponer para que otros archivos puedan acceder a ellos a través de un único punto.

Mixins, inclusión y extensión

SASS ofrece mecanismos para reutilizar declaraciones de estilo. Los dos más habituales en esta lista son los mixins y @extend, pero no cumplen exactamente el mismo propósito.

`@mixin` y `@include`

Un mixin define un bloque reutilizable. Puede contener propiedades, selectores y parámetros. Después se inserta en un selector mediante @include, con la posibilidad de enviar argumentos.

@mixin button($color) {
  background: $color;
  padding: 10px;
}

.button {
  @include button(blue);
}

En este ejemplo, el parámetro $color permite personalizar el fondo cuando se incluye el mixin.

La directiva @content permite insertar dentro del mixin un bloque de contenido proporcionado desde el lugar donde se utiliza.

`@extend` y placeholders

@extend permite que un selector comparta las reglas de otro selector. SASS agrupa los selectores correspondientes en el CSS compilado.

.base {
  padding: 10px;
}

.button {
  @extend .base;
}

Un placeholder comienza con el símbolo %. Define un conjunto de reglas reutilizables que no genera CSS por sí solo. Solo participa en el CSS compilado cuando otro selector lo utiliza mediante @extend.

%base {
  padding: 10px;
}

.button {
  @extend %base;
}

Como criterio práctico, un mixin resulta útil cuando se necesita insertar estilos que pueden personalizarse mediante parámetros. @extend sirve para compartir reglas entre selectores, por ejemplo, en estructuras más estáticas como un estilo común para mensajes de error.

Otras directivas relacionadas son:

Elemento	Función
`&`	Hace referencia al selector padre.
`@at-root`	Saca una regla de su contexto de anidamiento.
`@content`	Inserta contenido proporcionado al mixin mediante un bloque.
`%placeholder`	Define reglas reutilizables que no se emiten por sí solas.

Variables y valores

Las variables SASS comienzan con $. Sirven para guardar valores reutilizables, como colores, tamaños, fuentes o medidas.

$primary: blue;

.button {
  background: $primary;
}

Si el valor cambia, puede modificarse en la declaración de la variable y reutilizarse en las reglas que la consultan.

Elemento	Función
`$`	Declara una variable.
`!default`	Asigna un valor únicamente si la variable todavía no tiene uno definido.
`!global`	Modifica una variable en el ámbito global.
`null`	Representa la ausencia de un valor.
`!important`	Fuerza la prioridad de una declaración CSS.
`!optional`	Evita un error cuando un `@extend` no encuentra el selector indicado.

Conviene distinguir !important de las demás opciones de esta tabla: es una marca de prioridad de CSS que también puede aparecer en declaraciones escritas con SCSS.

Control de flujo y diagnóstico

Las directivas de control permiten ejecutar bloques según condiciones o recorrer colecciones y rangos.

Directiva	Función
`@if`	Ejecuta código cuando una condición es verdadera.
`@else`	Ejecuta el bloque alternativo cuando la condición anterior es falsa.
`@else if`	Evalúa otra condición alternativa.
`@each`	Recorre los elementos de una lista o un mapa.
`@for`	Ejecuta un bucle con un contador numérico.
`@while`	Repite un bloque mientras una condición sea verdadera.
`@return`	Devuelve un valor desde una función.
`@error`	Genera un error y detiene la compilación.
`@warn`	Muestra una advertencia durante la compilación.
`@debug`	Muestra información de depuración.

Estas directivas cubren dos necesidades: controlar qué reglas se generan y obtener información cuando se procesa una hoja de estilos.

Funciones de SASS

Las funciones permiten consultar o transformar valores. SASS también permite declarar funciones propias mediante @function.

Funciones de listas, mapas y variables

Función o directiva	Función
`@function`	Declara una función personalizada.
`type-of()`	Devuelve el tipo de un valor.
`inspect()`	Devuelve una representación textual de un valor.
`length()`	Devuelve la cantidad de elementos de una lista.
`nth()`	Obtiene un elemento de una lista por posición.
`index()`	Devuelve la posición de un elemento en una lista.
`join()`	Combina dos listas.
`append()`	Añade un elemento a una lista.
`map-get()`	Obtiene un valor de un mapa.
`map-merge()`	Combina dos mapas.
`map-keys()`	Devuelve las claves de un mapa.
`map-values()`	Devuelve los valores de un mapa.
`map-has-key()`	Comprueba si existe una clave en un mapa.
`variable-exists()`	Comprueba si existe una variable.
`mixin-exists()`	Comprueba si existe un mixin.
`function-exists()`	Comprueba si existe una función.

Funciones numéricas y de unidades

Función	Función
`unit()`	Devuelve la unidad de un número.
`unitless()`	Comprueba si un número no tiene unidad.
`percentage()`	Convierte un número en porcentaje.
`round()`	Redondea un número.
`ceil()`	Redondea hacia arriba.
`floor()`	Redondea hacia abajo.
`min()`	Devuelve el menor valor.
`max()`	Devuelve el mayor valor.
`abs()`	Devuelve el valor absoluto.

Funciones de color

Función	Función
`lighten()`	Aclara un color. Está obsoleta en favor de `color.adjust()`.
`darken()`	Oscurece un color. Está obsoleta en favor de `color.adjust()`.
`mix()`	Mezcla dos colores.
`invert()`	Invierte un color.
`complement()`	Devuelve el color complementario.
`grayscale()`	Convierte un color a escala de grises.
`saturate()`	Aumenta la saturación. Está obsoleta en favor de `color.adjust()`.
`desaturate()`	Reduce la saturación. Está obsoleta en favor de `color.adjust()`.
`adjust-hue()`	Modifica el tono de un color.
`rgba()`	Define un color RGB con transparencia.
`opacify()`	Aumenta la opacidad. Está obsoleta en favor de `color.adjust()`.
`transparentize()`	Reduce la opacidad. Está obsoleta en favor de `color.adjust()`.

Operadores y símbolos

Los operadores permiten realizar operaciones con valores, comparar expresiones y combinar condiciones. Otros símbolos sirven para separar elementos o construir identificadores.

Símbolo	Función
`+`	Suma valores compatibles.
`-`	Resta valores.
`*`	Multiplica valores.
`/`	Divide valores; según el contexto también puede representar una división CSS.
`%`	Obtiene el módulo o resto de una división.
`==`	Comprueba igualdad.
`!=`	Comprueba desigualdad.
`>` y `<`	Comprueban si un valor es mayor o menor que otro.
`>=` y `<=`	Comprueban las relaciones mayor o igual y menor o igual.
`and`	Operador lógico AND.
`or`	Operador lógico OR.
`not`	Niega una condición lógica.
`,`	Separa elementos de una lista.
`:`	Separa claves y valores en mapas.
`...`	Representa argumentos variádicos o rangos exclusivos según el contexto.
`..`	Representa un rango inclusivo en `@for`.
`-` en nombres	Forma parte de nombres de variables, mixins y funciones.
`_`	Se considera equivalente a `-` en identificadores SASS.

Directivas CSS compatibles

Además de sus propias directivas, los archivos SCSS pueden utilizar directivas CSS para definir condiciones de aplicación, animaciones, fuentes y organización de la cascada.

Directiva	Función
`@media`	Aplica estilos según condiciones del dispositivo o del viewport.
`@supports`	Aplica estilos si el navegador admite una característica.
`@keyframes`	Define una animación CSS.
`@font-face`	Registra una fuente personalizada.
`@layer`	Define una capa de la cascada CSS.
`@container`	Aplica estilos según las condiciones de un contenedor.
`@page`	Define estilos para páginas impresas.
`@charset`	Declara la codificación del archivo CSS.

Cómo elegir entre las herramientas de reutilización

La elección depende de qué se desea compartir:

Variables: para reutilizar valores como colores, fuentes y medidas.
Mixins: para insertar bloques de estilos que pueden recibir parámetros.
Placeholders y @extend: para compartir reglas entre selectores sin emitir el placeholder de forma independiente.
Módulos con @use y @forward: para organizar la distribución de variables, funciones y mixins entre archivos.
Funciones: para obtener o transformar valores que después pueden utilizarse en declaraciones.

Conocer estos elementos permite leer hojas SCSS con más facilidad y decidir cómo separar responsabilidades dentro de los estilos. No todos resuelven el mismo problema: unos organizan archivos, otros reutilizan reglas y otros operan sobre valores.

SASS y SCSS: directivas, selectores, funciones y operadores