Sass - Estructura de carpetas
Published: 2024-04-15 21:57:11

### Por qué usar SASS ?
---

- SASS propone además de sus funciones avanzadas una manera de organizar nuestro proyecto  a través archivos parciales los cuales se compilan para dar lugar a un único archivo .css que de otra manera sería muy difícil obtener.


### Estructura de carpetas

---

- La siguiente estructura es una guía de buenas prácticas para estructurar el contenido de los archivos **.scss**

- Se recomienda hacer una copia de nuestros estilos css ya escritos para eliminar cualquier riesgo, y en caso de necesitarlos nuevamente poder acudir a ellos.



```bash
📂 scss/
│   ├── 📂 base/
│   │   ├── _reset.scss       # Reset de los estilos
│   │   ├── _typography.scss  # Estilos de tipografía
│   │   └── _base.scss        # Estilos base (elementos HTML, etc.)
│   │
│   ├── 📂 layout/
│   │   ├── _header.scss      # Estilos del encabezado
│   │   ├── _footer.scss      # Estilos del pie de página
│   │   ├── _sidebar.scss     # Estilos de la barra lateral
│   │   └── _navigation.scss  # Estilos de la navegación
│   │
│   ├── 📂 utilities/
│   │   ├── _variables.scss   # Variables (colores, tipografía, etc.)
│   │   ├── _functions.scss   # Funciones
│   │   ├── _mixins.scss      # Mixins
│   │   └── _helpers.scss     # Clases helper
│   │
│   └── main.scss             # Archivo principal SCSS
│
📂 css/
│   └── main.css              # Archivo CSS compilado
|   
│
📂 pages/
│   ├── about.html            # Página 'Acerca de'
│   ├── contact.html          # Página de contacto
│   └── any_other_page.html   # Cualquier otra página
│
📂 assets/
│   ├── 📂 images/            # Imágenes
│
index.html                    # Página principal (index)

```

### Explicación de las diferentes carpetas.
---

- 📂 **scss/**: Carpeta para todos los archivos SCSS, organizados en subcarpetas.

- 📂 **base/**: Contiene los estilos básicos, incluyendo normalización, tipografía y estilos base.

- 📂 **layout/**: Incluye los estilos para las secciones estructurales principales como el encabezado, el pie de página, entre otros.

- 📂 **pages/**: Contiene estilos que son específicos para cada página, permitiendo personalización donde se necesite.

- 📂 **utilities/**: Alberga ayudas como variables, funciones y mixins que facilitan la escritura de CSS.

- 📄**main.scss:** Importa todos los archivos parciales y es el punto de entrada para la compilación.

- 📂 **css/**: Contiene el archivo CSS compilado desde SCSS.
- 📂 **pages/**: Contiene archivos HTML para páginas específicas del sitio, permitiendo una mejor organización y separación del contenido.

- 📂 **assets/**: Carpeta para almacenar recursos estáticos como imágenes y fuentes tipográficas.

- 📄 **index.html**: El archivo HTML principal del sitio, normalmente la página de entrada o página de inicio.



### Archivo main.scss
---

- Este archivo es el punto de entrada para la compilación,
  dentro de este archivo tendrás el siguiente contenido:

```javascript
// Importar las variables, funciones y mixins primero, porque pueden ser necesitados en otros archivos


@import "utilities/variables";
@import "utilities/functions";
@import "utilities/mixins";
@import "utilities/helpers";

// Bases generales del sitio
@import "base/reset";
@import "base/typography";
@import "base/base";

// Layouts del sitio
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
@import "layout/navigation";

// Pages del sitio
@import "pages/about";
@import "pages/contact";
@import "pages/any_other_page";

```


### Comando para compilar
---


- El siguiente comando supone que la carpeta scss y css están al mismo nivel partiendo de la raíz del proyecto.

```bash
 sass scss/main.scss css/main.css
```

- Para compilar y seguir observando los cambios que se produzcan se puede usar el siguiente comando

```
sass --watch scss/main.scss:css/main.css

```

### Recordatorio

- El archivo que finalmente estará enlazado a cada una de nuestras páginas HTML será el archivo .css ya compilado.