Estructura de un Proyecto con Sass

Toda tecnología necesita de una organización óptima, para evitarnos perder el tiempo en un futuro.
Una de las ventajas de usar SASS es que nos permite dividir el código en varios archivos sin que ello afecte a su rendimiento.

De esta tarea se encarga la directiva @import, y nos permite tener modulado y organizado nuestro código.

Podremos crear componentes que sean independientes y así para poder reutilizarlos en otros proyectos.

Si nuestros componentes son personalizables, intenta evitar usar tamaños, colores, tipografías, etc … e incluir estas configuraciones en un fichero a parte.

El echo de tener una buena estructuración en nuestros estilos nos hará la vida más fácil a la hora de realizar futuras modificaciones.

Organización de un proyecto Sass

Una buena práctica es hacer uso de la carpeta assets/ de nuestro proyecto para crear la estructura del proyecto Sass.

Yo suelo incluir el código del proyecto realizado con Sass en la carpeta source/ y la compilación de esta en la propia carpeta css/ con su versión reducida en la carpeta css/dist/

Como no existe un estándar de organización cada uno tiene su estilo y personalidad propia.

Ahora veamos la finalidad de cada una de las carpetas:

  • La carpeta base contiene las tipografías de proyecto, reset y normalizaciones de elementos HTML para eliminar inconsistencias.
  • La carpeta layout contendrá la distribución de tu aplicación, incluso partes de la web en si misma.
  • En components guardaremos porciones del proyecto. Sería como si trataramos con widgets.
  • En la carpeta pages incluiremos estilos para cada página y de esta manera poder localizarlos más rápidamente (home.scss, contact.scss, etc …)
  • En themes en el caso que necesitaramos crear un theme para una parte de nuestro proyecto (extranet, admin, etc …)
  • abstracts es una carpeta muy importante y en la que incluyo helpers, mixins, funciones, variables y otras herramientas.
  • En vendor incluiremos archivos de librerías externas y que necesitará nuestro proyecto para poder funcionar (La grillas o reboot de bootstrap podrían ser un ejemplo).

Es muy importante saber que por si mismos los ficheros no generan código alguno.

No menos importante es el fichero que controla todo nuestro proyecto al que llamaré style.scss y que contendrá todos los imports del proyecto.

Es importante mantener un orden porque sino no se generará correctamente la hoja de estilos.

 

Etiquetado

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.