Módulos de SASS

Este artículo explica los módulos de SASS.

Explicamos cómo modularizar SASS usando @use y @forward, y cómo reutilizar variables, mixins, funciones, configuraciones de tema y APIs públicas.

YouTube Video

Módulos de SASS

El sistema de módulos de SASS ayuda a delimitar claramente los estilos y proporciona un diseño fácil de reutilizar y mantener.

Conceptos básicos de los módulos

Los módulos de SASS resuelven los problemas de contaminación del espacio de nombres global y dependencias poco claras que existían con el antiguo @import. Cada archivo se carga como un módulo con su propio espacio de nombres, y solo los elementos explícitamente exportados son accesibles desde otros archivos.

Ejemplo de estructura de archivos

Primero, aquí tienes un ejemplo de una estructura de proyecto realista. A continuación se muestra un ejemplo de un sistema de diseño pequeño.

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

• Esta estructura facilita la modularización, así como las pruebas y el reemplazo de partes.
• Los archivos parciales tienen un guion bajo al principio del nombre de archivo.

Fundamentos de @use

@use carga un módulo y proporciona un espacio de nombres. Esto previene colisiones de nombres y aclara el módulo de origen.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• Este archivo es simple y solo define variables. Las variables publicadas desde un módulo pueden ser referenciadas directamente usando @use.

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

• Aquí, el módulo variables se referencia con el espacio de nombres variables.. Este enfoque aclara el origen de cada elemento.

Acortar o aliasar espacios de nombres

Usar as te permite acortar el espacio de nombres.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

• Este es un ejemplo de importar variables usando el alias corto vars. Elige los nombres según si priorizas la legibilidad o la facilidad de escritura.

Definición de Mixin

Los mixins y las funciones también pueden definirse y usarse dentro de los módulos. Mantener los comentarios consistentes con las convenciones del proyecto ayuda a la claridad.

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

• Este archivo define un mixin para contenedores. Toma argumentos y proporciona valores predeterminados.

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• Este es un ejemplo de usar un mixin con @include.

Definiendo Funciones

Las funciones se utilizan para devolver valores, y pueden definirse y reutilizarse dentro de los módulos. Al encapsular los cálculos de valores de diseño en funciones, los estilos se vuelven más estables y fáciles de mantener.

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• Este archivo define una función que convierte valores en píxeles a rem. También se especifica un valor base predeterminado.

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• Aquí hay un ejemplo de cómo llamar a una función mediante @use y aplicar el resultado a un estilo.

Exportación de módulos y @forward (Diseño de la API)

Cuando quieras exponer múltiples archivos internos externamente, puedes usar @forward para crear una 'API pública'.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• Múltiples archivos internos pueden ser agrupados como un solo punto de entrada, que luego proporciona la API pública. Esto permite que los consumidores accedan a todas las funcionalidades necesarias importando solo un punto de entrada.

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• El contenido de variables y mixins se accede colectivamente a través de index. @forward convierte a index en la capa pública.

Controlando la API con las opciones show / hide de @forward

Si quieres exponer solo variables específicas, usa la opción show o hide.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• Agregar !default te permite publicar un valor que puede ser sobrescrito.

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• Usando show con @forward, puedes limitar la API expuesta solo a los elementos necesarios. Las variables y funciones usadas internamente no serán visibles desde afuera.

Hacer los módulos configurables (con with)

Si usas !default en el módulo, los valores pueden ser sobrescritos usando with en el lado de la importación.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• Un módulo con valores predeterminados definidos con !default puede aceptar configuraciones mediante with.

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

• with en @use permite sobrescribir variables predeterminadas de un módulo en el momento de la importación. Esto es útil para cambiar de tema.
• Ten en cuenta que with solo surte efecto durante la importación y no puedes cambiar esos valores después.

Ejemplo práctico: Componente de botón (ejemplo completo)

Intentemos diseñar estilos de botones usando módulos. Primero, separa las variables y los mixins en sus propios módulos.

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• Las variables predeterminadas para los botones se definen aquí. Usar !default permite que los consumidores sobrescriban estos valores.

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

• El mixin base para botones se define aquí. Están separados para facilitar su reutilización.

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• Los estilos de los botones se crean usando referencias de espacio de nombres con @use. Una variante está definida como .button--large.

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• Al importar el módulo button, puedes usar los estilos de botón inmediatamente.

Cambio de tema (usando múltiples archivos de tema)

El cambio de tema se puede hacer mediante configuración usando with o creando módulos separados y cambiando cuál se usa con @use.

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

• Define colores de marca y otras configuraciones en múltiples archivos de tema y cámbialos durante la compilación o importación.

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• Elige el tema usando with o importando, por ejemplo, @use 'themes/light' durante el proceso de compilación.

Privado y público (prefijo _ y !default)

En SASS, añadir un guion bajo al principio del nombre de un archivo lo marca como un parcial. Sin embargo, al gestionar la visibilidad de exportación de módulos, utiliza show y hide con @forward para controlar lo que se exporta.

Puedes usar @forward para organizar la API pública y ocultar implementaciones internas desde fuera.

Mejores prácticas para el uso en el mundo real

A continuación se presentan algunos conceptos básicos que son útiles al usar SASS en situaciones prácticas. Todas estas pautas ayudarán a reducir la confusión durante el desarrollo y a mantener tu código organizado.

• Si es probable que las variables cambien como parte de un tema, agrega !default. Esto facilita que los usuarios puedan sobrescribir valores.
• Los módulos deben dividirse por responsabilidad y enfocarse en un solo propósito. Se vuelve más fácil de gestionar al separar variables, mixins y componentes.
• Gestiona los contenidos públicos con @forward y usa show o hide según sea necesario. Definir el alcance de lo que es público conduce a un diseño más seguro.
• Usa espacios de nombres para dejar claro a qué módulo pertenece cada función. Esto previene confusiones con otro código.
• Recuerda que with solo funciona en el momento de @use. Como no puedes cambiarlas después, establece las configuraciones en el momento de la importación.
• Usa un guion bajo al principio de los nombres de archivo para hacerlos parciales, así no se compilan individualmente. Esto facilita la combinación de archivos en una estructura más grande.
• Incluir ejemplos de uso en el módulo index ayuda con las pruebas y la documentación. Se vuelve más fácil para los usuarios entender el comportamiento.

Tener en cuenta estos puntos te ayudará a gestionar proyectos grandes y mantener un código legible en equipo.

Resumen

El sistema de módulos de SASS organiza el código de estilos mediante espacios de nombres, APIs públicas y una configuración simplificada. Usar hábilmente @use y @forward facilita mucho el desarrollo en equipo, el cambio de temas y el diseño de librerías.

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