« HE:labs
HE:labs

Organizando projeto Sass

Postado por Bruno Fernando em 17/02/2014

Muitos desenvolvedores front-end já usam o Sass em seus projetos, mas poucos mantêm uma organização mínima dos seus arquivos. No Sass, há vários recursos úteis, como o @import para incluir os estilos individualmente em um arquivo principal.

Vou apresentar algumas dicas que utilizo no meu workflow.

Estrutura básica

É uma boa prática separar seus arquivos por pastas que sejam fáceis de identificar. Eu gosto da estrutura dos meus projetos assim:

 1 .
 2 └── stylesheets
 3     ├── general.scss
 4     ├── core
 5     │   ├── base.scss
 6     │   ├── fonts.scss
 7     │   ├── layout.scss
 8     │   └── reset.scss
 9     ├── helpers
10     │   ├── _buttons.scss
11     │   ├── _tags.scss
12     │   └── _icon-fonts.scss
13     │   └── _cards.scss
14     │   └── _posts.scss
15     ├── modules
16     │   ├── tags.scss
17     │   ├── buttons.scss
18     │   ├── works.scss
19     │   ├── posts.scss
20     │   ├── slide.scss
21     │   ├── main-footer.scss
22     │   └── main-header.scss
23     └── vendor
24         ├── bourbon
25         └── neat

Core, Helpers, Modules e Vendor

Como podem ver, os estilos estão divididos em 4 pastas. Core, Helpers, Modules e Vendor.

  • No diretório core, são definidos os blocos de layout e formatação dos elementos genéricos.
  • O diretório helpers é reservado para os arquivos Sass que não têm um output. Como declarações mixin, function e extends e sua nomenclatura é iniciada com um underscore. (conceito de partials).
  • No diretório modules, é definido o CSS dos módulos do seu site. É sempre bom ter módulos "estreitos", ou seja, bem divididos (buttons, forms, headers, footers e etc).
  • O diretório vendor é reservado para CSS de terceiros (Bourbon, Neat, Bitters e etc).
  • No arquivo _settings, são definidas as variáveis. Como esse arquivo não irá ter um output, segue o mesmo princípio da nomenclatura dos arquivos do helpers.

Arquivo principal

No arquivo general, importo todos os arquivos na seguinte ordem:

 1 // Vendor
 2   //Rails => @import "bourbon";
 3   @import "vendor/bourbon/bourbon";
 4   @import "settings";
 5   //Rails => @import "neat";
 6   @import "vendor/neat/neat";
 7   //...
 8 
 9   // Helpers
10   @import "helpers/buttons";
11   @import "helpers/icon-fonts";
12   @import "helpers/posts";
13   //...
14 
15   // Core
16   @import "core/reset";
17   @import "core/fonts";
18   @import "core/base";
19   @import "core/layout";
20   //...
21 
22   // Modules
23   @import "modules/tags;
24   @import "modules/buttons";
25   @import "modules/works;
26   @import "modules/posts;
27   @import "modules/posts-full;
28   @import "modules/slide;
29   @import "modules/main-footer";
30   @import "modules/main-header";
31   //...

E no Rails?

Faço o require do arquivo general no application.css.

1 /* ...
2  *= require general
3  */

Pro alto e avante!

Essa estrutura funciona muito bem para mim, não significa que seja a ideal. Existem várias outras recomendações de organização de CSS. Veja qual é a melhor e monte seu workflow.

Compartilhe

Sabia que nosso blog agora está no Medium? Confira Aqui!