1. Inicio
  2. noticias dev
    3. Aprender a programar
    1. Primeros pasos
    2. html
    3. CSS
    4. Javascript
    5. Git & GithUb
    6. Preprocesadores
    7. Bash scripting
    Desarrollo Web
    1. Wordpress
    2. React
    3. NextJs
    4. Astro
    Tutoriales
    1. git
    2. WSL
    Automatización
    1. Bash scripting
    Personal
    1. Escritura
    Apoyar este sitio 💚

Guía moderna de Sass con la arquitectura 7-1 / @use y @forward

Angela Sofíá Osorio

Angela Sofíá Osorio

Tiempo de lectura 2 minutes

Fecha de publicación

¿Sigues usando @import en tus proyectos Sass? Es hora de actualizar tu flujo de trabajo.

La arquitectura 7-1, combinada con las nuevas directivas @use y @forward, es la forma más moderna y escalable de escribir y organizar tu código Sass.
En esta guía, aprenderás cómo implementar esta arquitectura profesionalmente paso a paso.

✅ ¿Qué es la arquitectura 7-1 en Sass?

La arquitectura 7-1 es una convención de organización que divide tu código Sass en 7 carpetas (por responsabilidades) y 1 archivo principal (main.scss o main.sass). Esta estructura, combinada con @use y @forward, potencia al máximo la modularidad, reutilización y mantenibilidad de tu código.

Close-up of CSS code displayed on a computer monitor, showcasing web development.

🗂 Estructura de carpetas moderna con @use

Copy

sass/
│
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── index.scss      ← usa @forward
│
├── components/
│   ├── _buttons.scss
│   ├── _carousel.scss
│   └── index.scss      ← usa @forward
│
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── index.scss      ← usa @forward
│
├── pages/
│   ├── _home.scss
│   └── index.scss      ← usa @forward
│
├── themes/
│   ├── _theme.scss
│   └── index.scss      ← usa @forward
│
├── utils/
│   ├── _variables.scss
│   ├── _mixins.scss
│   ├── _functions.scss
│   └── index.scss      ← usa @forward
│
├── vendors/
│   ├── _bootstrap.scss
│   └── index.scss      ← usa @forward
│
└── main.scss           ← usa @use
Plaintext

📦 ¿Cómo se organiza cada carpeta?

1. base/ – Estilos base del proyecto

Copy

// base/_reset.scss
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
Sass
// base/index.scss
@forward "reset";
@forward "typography";
Sass

2. components/ – Elementos reutilizables como botones, cards, dropdowns

// components/index.scss
@forward "buttons";
@forward "carousel";
Sass

3. layout/ – Estructura de página

// layout/index.scss
@forward "header";
@forward "footer";
@forward "grid";
Sass

4. pages/ – Estilos específicos por página

// pages/index.scss
@forward "home";
@forward "contact";
Sass

5. themes/ – Estilos por tema

// themes/index.scss
@forward "theme";
@forward "admin";
Sass

6. utils/ – Variables, mixins, funciones Sass

// utils/index.scss
@forward "variables";
@forward "mixins";
@forward "functions";
Sass

7. vendors/ – Librerías externas

// vendors/index.scss
@forward "bootstrap";
@forward "jquery-ui";
Sass

🧠 main.scss – Archivo principal

Este archivo importa todos los módulos usando @use y puede usar alias para organizar mejor los nombres de los miembros expuestos:

@use "utils" as *;
@use "base";
@use "layout";
@use "components";
@use "pages";
@use "themes";
@use "vendors";
Sass

💡 as * solo es recomendable para utils/ o cuando controlas el scope totalmente. De lo contrario, usa alias (as layout, as base, etc.) para evitar colisiones.

⚠️ Diferencia entre @use y @import

@import (obsoleto)@use / @forward (moderno)
Carga múltiples vecesSolo se carga una vez
Scope globalScope por módulo
Menos controlMejor organización y control

✅ Buenas prácticas con @use

  • Usa index.scss en cada carpeta para exportar los módulos internos con @forward.
  • Usa alias (@use "layout" as layout) para acceder a elementos como layout.header.
  • Evita as * en carpetas grandes para prevenir conflictos.
  • Divide bien las responsabilidades: un archivo para cada componente.

🦝Conclusión

Adoptar la arquitectura 7-1 con @use y @forward no solo moderniza tu stack de estilos, también mejora la eficiencia, legibilidad y mantenimiento del código Sass en proyectos reales.

¿Estás empezando un nuevo proyecto? No lo dudes: estructura tu Sass con 7-1 + @use. Es limpio, escalable y profesional.