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.
│ ├── 📂 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:
@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.
Para compilar y seguir observando los cambios que se produzcan se puede usar el siguiente comando
Recordatorio
El archivo que finalmente estará enlazado a cada una de nuestras páginas HTML será el archivo .css ya compilado.
