Cómo organizar los archivos Sass de tu proyecto

Diferentes propuestas para organizar las carpetas de tus archivos SASS

Sass se ha convertido en uno de mis lenguajes / preprocesadores favoritos a la hora de escribir las hojas de estilo de mis proyectos. De ahí que haya decidido preparar este artículo donde explicaros la estructura que habitualmente escojo para organizar los archivos SASS de un proyecto, ya que adoptar una buena organización nos permitirá mantener el proyecto mucho más fácilmente y beneficiarnos de la gran flexibilidad que nos proporciona esta librería para llevar a cabo tareas como la creación de componentes que podamos reutilizar en otros proyectos.

Por supuesto que esto es sólo una forma de trabajar con Sass (concretamente la que a mí me funciona) y no estáis obligados a llevarla al pie de la letra. Sentíos libres de introducir las modificaciones y mejoras que más se adapten a vuestra forma de trabajar.

Dicho ésto, comencemos.

Empleando Partials

Una de las múltiples ventajas que nos proporciona Sass es poder dividir nuestras hojas de estilo en pequeños archivos (denominados partials) que posteriormente podemos importar en nuestras hojas de estilo principales mediante la expresión @import .

Por ejemplo, podemos contar con un archivo principal denominado main.sass

// Archivo: main.sass
@import 'layout/header';

y un archivo partial denominado _header.sass dentro de la carpeta layout que contenga el estilo de nuestra cabecera:

// File: _header.sass
.the-header
  
  // estilos del header

Es importante destacar que el nombre de un archivo partial debe comenzar por _ tal y como podéis ver en el archivo _header.sass .

Una estructura sencilla

En el caso de que estéis trabajando en un proyecto pequeño seguramente no necesitéis una estructura compleja para organizar vuestros archivos. Por tanto, podéis adoptar una estructura similar a la siguiente:

_base.sass
_layout.sass
_components.sass
/components
  _buttons.sass
  _jumbo.sass
main.sass