SASS + Atomic design
Publicado há 4 anos por Fernando Moreira.Tempo de leitura: 4 minutos - 605 palavras.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.
- O que é Design Atômico? - tableless
- Atomic Design - Por que usar? - nomadev
- Passo-a-passo como desenvolver com Atomic Design, Mobile-first e Stylus - Parte 1 - nomadev
- Atomic Design como funciona - frontendbrasil
/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](http://sass-lang.com/documentation/file.SASSREFERENCE.html#placeholderselectors)_ 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