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) 
Enter fullscreen mode
Exit fullscreen mode

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"; 
Enter fullscreen mode
Exit fullscreen mode

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
Enter fullscreen mode
Exit fullscreen mode
  • Para compilar y seguir observando los cambios que se produzcan se puede usar el siguiente comando
sass --watch scss/main.scss:css/main.css 
Enter fullscreen mode
Exit fullscreen mode

Recordatorio

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

Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top
State of the art datacenter get a host. Then(() => window. How to install docker and docker compose on ubuntu 20.