Toda tecnología necesita de una organización óptima, para evitarnos perder el tiempo en un futuro. La tecnología Sass nos permite modular nuestro proyecto, haciendo que este sea sencillo de leer y reutilizable.
La directiva @import
Una de las ventajas de usar SASS es que nos permite dividir el código en varios archivos, sin que esto afecte a su rendimiento. De esta tarea se encarga la directiva @import, que nos permite importar módulos en nuestro proyecto.
Una de las ventajas de modular nuestro código, es que podemos crear componentes independientes 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 de configuración a parte.
El hecho de tener una buena estructuración, 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/ en nuestro proyecto, donde crearemos la estructura del proyecto Sass.
Yo suelo incluir el código del proyecto realizado con Sass en la carpeta source/ y el resultado de la compilación en la carpeta css/dist/
A pesar de todo, no existe un estándar de organización, por lo que cada uno puede tener su propia personalización de proyecto.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|- assets/ | |- css/| | |- dist/ | |- style.min.css | |- style.min.css.map | |- source/ | |- abstracts/ | | |- media-queries.scss | | |- variables.scss | |- base/ | | |- _fonts.scss | |- components/ | | |- _headings.scss | |- layout/ | | |- _footer.scss | | |- _header.scss | | |- _nav.scss | | |- _content.scss | |- pages/ | | |- _home.scss | |- themes/ | |- vendor/ | | |- bootstrap/ | | |- _grid.scss | | |- _greboot.scss | |- style.scss | |- js/ | |- img/ |
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 (search.scss, adds.scss, buttons.scss, etc …). Sería como si trataramos con widgets.
- En la carpeta pages incluiremos los estilos personalizados de cada página, en el caso de que los tuvieran (home.scss, contact.scss, etc …)
- En themes yo suelo incluir estilos para otras partes del 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 (las grillas, reboot, etc …).
Es muy importante saber que por si mismos los ficheros no generan código alguno.
El fichero más importante y donde se almacena toda la configuración del proyecto es style.scss y contiene todos los módulos que incluye el proyecto.
Es importante mantener un orden secuencial correcto, porque sino podría no generar correctamente la hoja de estilos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@charset 'utf-8'; // Configuration and helpers @import 'abstracts/variables'; @import 'abstracts/media-queries'; // vendors @import 'vendor/bootstrap/reboot'; @import 'vendor/bootstrap/grid'; // Base stuff @import 'base/fonts'; // Components @import 'components/headings'; // layout// @import 'layout/nav'; @import 'layout/header'; @import 'layout/content'; @import 'layout/footer'; // pages @import 'pages/home'; |
