Sass - Estructura de carpetas

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.
  

📂 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:

// 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.

 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.