Estruturar projetos maiores

Uma estrutura de projeto seguindo uma estrutura de 3 parciais é a mais simples e rápida para que você comece a organizar um pequeno projeto.

Mas, se você sabe que o que irá trabalhar será um projeto maior ou se o seu projeto for ficando com a dimensão cada vez maior, está na hora de ver maneiras mais complexas de organizar o seu projeto!

O padrão 7-1

Este é o padrão mais divulgado e definido para projetos grandes pela comunidade de Sass. Seu funcionamento é em cima do uso de 7 pastas (com os parciais) e 1 arquivo na raiz (normalmente vai ser o main.scss).

Cada pasta vai agrupar tipos diferentes de estilos, sendo eles:

Abstratos (também chamados de Utilidades):
São arquivos que devem somente ajudar, mas que não geram nenhum código CSS quando compilado. Assim, podem conter variáveis, funções, mixins ou arquivos de configuração diversos.

Base
Contém todo o estilo padrão do site, inclusive o que for comumente usado em todo o projeto. Exemplos de arquivos de base são regras tipográficas (como tamanhos e famílias), resets (que eliminam qualquer estilo preexistente em elementos) e outros estilos que você pode usar ao longo de todo o projeto.
Componentes (também chamados de Módulos)
Serão os arquivos para elementos reutilizáveis do seu site, como botões, carrosséis e sliders. Normalmente, essa parte vai se preencher muito rápido já que o site inteiro será separado em diversos componentes.

Layout
Mantém todas as estilizações em relação ao sistema grid, header, footer, navegação e qualquer outro aspecto de layout do seu projeto.

Páginas
Quando seu site tem mais de uma página, é comum que algumas delas tenham estilos diferentes das outras. Assim, nesta página ficará os estilos específicos a somente determinada página, sendo de uso exclusivo dela.

Temas
Se o seu projeto tiver temas diferentes disponíveis (como um Dark Mode), aqui você colocaria as estilizações específicas para cada um deles. Admitidamente, não será uma pasta muito utilizada.

Vendors
Contém o código criado por terceiros, como bibliotecas e frameworks. Então, os arquivos para Bootstrap e jQuery UI, por exemplo, ficariam aqui.

Exemplo de Estrutura 7-1

O seguinte é um exemplo da estrutura 7-1, com os tipos de arquivos separados em sua pasta correspondente:

sass/
|
|– abstracts
|   |– _variables.scss    // Variáveis
|   |– _functions.scss    // Funções
|   |– _mixins.scss       // Mixins
|
|– base/
|   |– _reset.scss        // Reset
|   |– _typography.scss   // Tipografia
|
|– components
|   |– _buttons.scss      // Botões
|   |– _carousel.scss     // Carrossel
|   |– _slider.scss       // Slider
|
|– layout/
|   |– _navigation.scss   // Navegação
|   |– _grid.scss         // Sistema de Grid
|   |– _header.scss       // Header
|   |– _footer.scss       // Footer
|   |– _forms.scss        // Formuários
|
|– pages/
|   |– _home.scss         // Página Inicial
|   |– _contact.scss      // Página de Contato
|
|– themes/
|   |– _theme.scss        // Tema Padrão
|   |– _admin.scss        // Tema de Administrador
|
|– vendors/
|   |– _bootstrap.scss    // Bootstrap
|   |– _jquery-ui.scss    // jQuery UI
|
`– main.scss              // Arquivo .SCSS principal

O arquivo main

Agora, para utilizar todos estes parciais separados em pastas, basta fazer os @import necessários para que tudo fique conectado.

O arquivo main.scss referente ao exemplo anterior seria:

@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';

@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';

@import 'base/reset';
@import 'base/typography';

@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/forms';

@import 'components/buttons';
@import 'components/carousel';
@import 'components/slider';

@import 'pages/home';
@import 'pages/contact';

@import 'themes/theme';
@import 'themes/admin';

Conclusão

Este padrão 7-1 é um dos mais conhecidos em relação à organização de projetos grandes em Sass, mas também não está escrito sobre pedra. Todo projeto é diferente, então cabe a você adaptar estruturas e organizações para que se encaixe melhor no que deseja.