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-1Este é 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.BaseConté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.LayoutManté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áginasQuando 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.TemasSe 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.VendorsConté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-1O 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 principalO arquivo mainAgora, 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ãoEste 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.

Curso de Sass: Syntactically Awesome Style Sheets

Estruturar projetos maiores