Pular para o conteúdo
nandomoreira.dev
Arquivo

SASS + Atomic design

#sass#css#pre-processador

Ajustes de leitura
Fundo
Tamanho do texto
Entrelinha
Largura
Logotipo do Sass em letra cursiva branca sobre gradiente azul e rosa, com a palavra Architecture abaixo.

SASS é um pré-processador incrível não acha? Mas muitos não sabem como organizar seus projetos com ele, nesse artigo vou lhe mostrar como organizar uma estrutura “foda” usando SASS e Atomic Design, vem comigo.

Não vou explicar o que é Atomic Design, não é o intuito desse artigo, mas vou deixar aqui alguns links para que você dê uma lida antes de continuar.

/diretórios

Depois que você entendeu bem o que é Atomic Design e como ele funciona vamos começar a desenhar a estrutura do nosso projeto.

Nós sabemos que atomic design é dividido em 5 itens, atoms, molecules, organisms, templates e pages, mas nós usaremos apenas 3 desses itens: atoms, molecules e organisms e, claro, criaremos um diretório pra cada item, mais ou menos assim:

sass-e-atomic-design/
  └── sass/
    ├── atoms/
    │   └── # Arquivos sass para atoms
    ├── molecules/
    │   └── # Arquivos sass para molecules
    └── organisms/
        └── # Arquivos sass para organisms

Ainda junto com esses 2 itens do Atomic Design vamos adicionar mais 2 diretórios, core/ e vendor/.

Fica mais ou menos assim:

sass-e-atomic-design/
  └── sass/
    ├── atoms/
    │   └── # Arquivos sass para atoms
    ├── core/
    │   └── # Arquivos sass para variaveis e mixins
    ├── molecules/
    │   └── # Arquivos sass para molecules
    ├── organisms/
    │   └── # Arquivos sass para organisms
    └── vendor/
        └── # Arquivos sass de terceiros

O diretório core/

Vamos começar com o diretório core/, nele vamos criar 4 outros diretórios: bosons/, functions/, mixins/ e variables/, e 4 arquivos _bosons.scss, _functions.scss, _mixins.scss e _variables.scss.

  • bosons/: São os _placeholders_ do SASS, são as partículas que vão dar massa a nossos átomos.
  • functions/: São as funções SASS do projeto.
  • mixins/: São as mixins do projeto.
  • variables/: São todas as variáveis do projeto.

Vamos deixar functions/, mixins/ e variables/ de lado e vamos nos concentrar em bosons/, é ai que começa a fazer sentido a metodologia Atomic Design. Nesse diretório vamos criar um bóson que muita gente conheçe, o famoso button.

Crie um arquivo chamado _buttons.scss e coloque a seguinte estrutura.

%button {
  padding: 0.8em 2em;
  text-decoration: none;
  border: none;
  margin-top: 1em;
  display: inline-block;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  transition: 0.4s background ease, 0.4s color ease;
  border-radius: 0.4em;
  background: #c12b2c;
  font-weight: bold;
  text-transform: uppercase;

  &:hover,
  &:focus,
  &:active {
    background: lighten(#c12b2c, 7%);
    text-decoration: none;
    color: #fff;
  }
}

%button-ghost {
  background-color: transparent;
  border: 2px solid #fff;
  border: 2px solid rgba(#fff, 0.9);

  &:hover,
  &:focus,
  &:active {
    border-color: rgba(#fff, 0.7);
    background-color: rgba(#fff, 0.1);
    text-decoration: none;
    color: #fff;
  }
}

A estrutura acima tem dois bósons que darão massa aos átomos de botões por todo nosso projeto, é bem simples, basta usar o @extend %button; que a mágica acontece.

Esse é só um pequeno exemplo de como podemos criar os nossos placeholders de SASS em nosso projeto, pense em bóson como algo que você vai usar muito e por todo o seu projeto, algo que será igualmente repetido em muitos lugares, assim você abstrai o CSS e o arquivo final ficá sem repetição de código.

Leia mais sobre bósons e quarks em nomadev

/continua..

Essa é a primeira parte do nosso tutorial de SASS e Atomic Design, no próximo episódio veremos como unir os bósons e os atoms e como isso pode reduzir o seu CSS final, ajudando assim na performace do seu projeto. Até lá!

/end

Posts relacionados