SASS

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.