Funciones SASS

Este artículo explica las funciones de SASS.

Explicaremos a fondo las funciones de SASS desde lo básico hasta temas avanzados, incluyendo ejemplos prácticos útiles para el trabajo real.

YouTube Video

Funciones SASS

Las funciones de SASS son poderosas herramientas que encapsulan lógica reutilizable en las hojas de estilo, permitiendo cálculos, formateos y ramificación condicional.

Estructura básica y uso de las funciones

Las funciones de SASS se definen con @function y devuelven un valor usando @return. Las funciones se llaman de la misma forma que las funciones incorporadas.

1// Example: Define a simple function that doubles a value
2@function double($n) {
3  @return $n * 2;
4}
5
6// Use the function
7.example {
8  width: double(10px);  // -> 20px
9}

• Este código define una función que duplica un número y lo aplica al ancho. Como resultado, se generará .example { width: 20px; }.

Argumentos, valores predeterminados y manejo de tipos

Las funciones pueden aceptar múltiples argumentos y establecer valores predeterminados. SASS no implementa tipado estático, pero prestar atención al formato de los argumentos hace que tus funciones sean más robustas.

1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3  @return $base-size * $scale + $unit;
4}
5
6.title {
7  font-size: responsive-font(16, 1.25);  // -> 20px
8}

• responsive-font tiene valores predeterminados para scale y unit, y algunos argumentos pueden omitirse al llamarla. En este ejemplo, se generará un valor como font-size: 20px;.

Uso de argumentos variádicos (...)

Utiliza argumentos variádicos si deseas pasar múltiples valores. Esto es útil para manejar listas o múltiples colores.

 1// Example: Sum any number of numbers passed in
 2@function sum-all($numbers...) {
 3  $total: 0;
 4  @each $n in $numbers {
 5    $total: $total + $n;
 6  }
 7  @return $total;
 8}
 9
10.box {
11  padding: sum-all(4px, 6px, 10px);  // -> 20px
12}

• Un argumento variádico como $numbers... se trata como una lista y puede ser procesado usando @each. En este ejemplo, se generará padding: 20px;.

Devolver y manipular listas o mapas

Las funciones también pueden devolver listas (separadas por espacio o coma) y mapas. Esto es útil para devolver valores complejos.

 1@use "sass:map";
 2
 3// Example: Return a map of spacing scale
 4@function spacing-scale($base) {
 5  @return (
 6    'small': $base * 0.5,
 7    'medium': $base,
 8    'large': $base * 2
 9  );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15  margin-bottom: map.get($scale, 'medium');
16}

• La función devuelve un mapa, y luego se obtienen los valores usando map.get. Esto te permite mantener un sistema de espaciado consistente.

Funciones con condicionales y bucles

@if, @else if, @else, @for, @each y @while pueden usarse dentro de las funciones. Puedes crear lógica de cálculo con condicionales y bucles.

 1// Example: Generate modular scale value using loop
 2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
 3  $result: $base;
 4  @if $step == 0 {
 5    @return $result;
 6  }
 7  @if $step > 0 {
 8    @for $i from 1 through $step {
 9      $result: $result * $ratio;
10    }
11  } @else {
12    @for $i from 1 through abs($step) {
13      $result: $result / $ratio;
14    }
15  }
16  @return $result;
17}
18
19.h1 {
20  font-size: modular-scale(3, 1rem, 1.333);
21}

• Esta función calcula una escala modular y multiplica o divide según los pasos sean positivos o negativos. modular-scale(3, 1rem, 1.333) devuelve un tamaño de fuente tres pasos por encima de la base.

Manejo de errores y advertencias (@error, @warn)

Puedes abortar usando @error ante argumentos no válidos o operaciones inesperadas, y emitir advertencias con @warn. El propósito es alertar tempranamente a los usuarios sobre posibles problemas.

 1@use "sass:math";
 2@use "sass:meta";
 3
 4// Example: Validate input and throw an error for invalid units
 5@function ensure-length($value) {
 6  @if meta.type-of($value) != 'number' or math.is-unitless($value) {
 7    @error "Expected a length with units, got #{$value}.";
 8  }
 9  @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14  width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21//   // expect error: "Expected a length with units, got 10."
22//   width: ensure-length(10);
23// }

• Si pasas valores no válidos, se generará un error en tiempo de construcción, facilitando identificar la causa. Las comprobaciones dentro de las funciones son útiles para detectar errores de forma temprana.

Creación de funciones específicas para colores

En SASS, puedes combinar varias funciones que manipulan colores para crear tu propia paleta de colores. Esto es útil para gestionar un esquema de colores consistente a lo largo de todo tu proyecto.

 1@use "sass:color";
 2@use "sass:list";
 3
 4// Example: Generate a color palette (tints and shades) from a base color
 5@function palette($color, $steps: 5, $strength: 10%) {
 6  $colors: ();
 7  @for $i from 0 through $steps {
 8    $amount: $i * $strength;
 9    $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10    $tint: color.mix(white, $color, $amount);
11    $colors: list.append($colors, $shade);
12    $colors: list.append($colors, $tint);
13  }
14  @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20  background-color: list.nth($palette, 1);
21}

• En este ejemplo, se utiliza color.mix para crear sombras mezclando con negro y matices mezclando con blanco. Los valores se devuelven en una lista y se pueden acceder usando list.nth.

Notas sobre el rendimiento y el tiempo de compilación

Las funciones SASS se evalúan en tiempo de compilación. Los bucles pesados, la recursión profunda o las operaciones extensas sobre mapas aumentarán el tiempo de compilación. Mantén las funciones pequeñas y simples; si es necesario, considera manejar los procesos complejos fuera de SASS, en herramientas de construcción o preprocesadores.

Colección práctica de funciones utilitarias

Aquí tienes algunas funciones utilitarias comúnmente usadas. El código está diseñado para ser utilizado de inmediato en proyectos reales.

 1@use "sass:math";
 2
 3// Example: Clamp a value between min and max
 4@function clamp-value($value, $min, $max) {
 5  @if $value < $min {
 6    @return $min;
 7  } @else if $value > $max {
 8    @return $max;
 9  }
10  @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15  @if math.unit($px) != "px" {
16    @error "px-to-rem requires a px value.";
17  }
18  @return ($px / $root) * 1rem;
19}

• clamp-value impone límites superior e inferior a un valor, y px-to-rem convierte valores de píxel a rem. Ambas funciones simplifican procesos que suelen surgir en el diseño responsivo.

Selección entre @function y mixins (@mixin)

Las funciones se especializan en devolver valores, mientras que los mixins generan bloques CSS. Si el resultado de la lógica es un solo valor de propiedad, usa una función; si es un bloque completo de estilos, usa un mixin.

 1// Example: Function returns a value
 2@function border-radius-value($size) {
 3  @return $size * 1px;
 4}
 5
 6// Example: Mixin outputs properties
 7@mixin rounded($size) {
 8  border-radius: border-radius-value($size);
 9  -webkit-border-radius: border-radius-value($size);
10}
11.card {
12  @include rounded(8);
13}

• Las funciones devuelven valores como números o colores para usar en otras propiedades, mientras que los mixins insertan directamente grupos de propiedades. La separación estricta en el diseño aumenta la mantenibilidad.

Manipulación de cadenas y consideraciones sobre el formato de salida

Debes tener cuidado al manejar números con unidades y cadenas en SASS. Concatenar una cadena a un número con unidad puede producir una salida no deseada. Utiliza unquote() o la interpolación de cadenas (#{}) según sea necesario.

 1@use "sass:math";
 2
 3// Example: Safely create a CSS value string
 4@function px-percentage($px, $total) {
 5  $percent: math.div($px, $total) * 100;
 6  @return "#{$percent}%";
 7}
 8
 9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11  $percent: math.div($px, $total) * 100;
12  // Round to 2 decimal places safely
13  $rounded: math.div(math.round($percent * 100), 100);
14  @return "#{$rounded}%";
15}

• Al devolver porcentajes como cadenas, gestiona la precisión usando interpolación o round para mayor claridad. Para evitar errores, maneja siempre claramente los tipos de datos al concatenar resultados de cálculos con cadenas.

Mejores prácticas para pruebas y documentación

Después de escribir una función, crea pequeños archivos SCSS con ejemplos de uso como pruebas, lo que facilita el mantenimiento. Puedes documentar para cada función el tipo/unidad de entrada, tipo de retorno, comportamiento ante fallos y ejemplos de uso.

 1@use "sass:math";
 2
 3// Example: Inline "tests" (partial usage examples)
 4// These can be compiled separately during development
 5
 6@function double($n) {
 7  @return $n * 2;
 8}
 9
10@function px-to-rem($px, $root: 16px) {
11  @if math.unit($px) != "px" {
12    @error "px-to-rem requires a px value.";
13  }
14  @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19  width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24  font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";

• Dejar comentarios con pequeños ejemplos de 'salida esperada' facilita detectar regresiones durante futuros refactorizados. Compilar automáticamente en un entorno CI y comprobar visualmente la salida es efectivo.

Resumen

Las funciones SASS son una forma poderosa de mejorar la reutilización y la coherencia en los estilos. Diseña las funciones para que sean pequeñas y simples, y garantiza la seguridad usando @error y @warn. Las funciones utilitarias de color, espaciado y conversión de unidades son convenientes para consolidar en una biblioteca compartida. Para evitar sobrecarga en la compilación, considera separar los procesos complejos en otras etapas de construcción cuando sea necesario.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video