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\n\nNã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.
\n
Depois que você entendeu bem o que é Atomic Design e como ele funciona vamos começar a desenhar a estrutura do nosso projeto.
\nNó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:
\nsass-e-atomic-design/\n └── sass/\n ├── atoms/\n │ └── # Arquivos sass para atoms\n ├── molecules/\n │ └── # Arquivos sass para molecules\n └── organisms/\n └── # Arquivos sass para organismsAinda junto com esses 2 itens do Atomic Design vamos adicionar mais 2 diretórios, core/ e vendor/.
Fica mais ou menos assim:
\nsass-e-atomic-design/\n └── sass/\n ├── atoms/\n │ └── # Arquivos sass para atoms\n ├── core/\n │ └── # Arquivos sass para variaveis e mixins\n ├── molecules/\n │ └── # Arquivos sass para molecules\n ├── organisms/\n │ └── # Arquivos sass para organisms\n └── vendor/\n └── # Arquivos sass de terceirosVamos 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.
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 {\n padding: 0.8em 2em;\n text-decoration: none;\n border: none;\n margin-top: 1em;\n display: inline-block;\n color: #fff;\n font-size: 1.2em;\n text-align: center;\n transition: 0.4s background ease, 0.4s color ease;\n border-radius: 0.4em;\n background: #c12b2c;\n font-weight: bold;\n text-transform: uppercase;\n\n &:hover,\n &:focus,\n &:active {\n background: lighten(#c12b2c, 7%);\n text-decoration: none;\n color: #fff;\n }\n}\n\n%button-ghost {\n background-color: transparent;\n border: 2px solid #fff;\n border: 2px solid rgba(#fff, 0.9);\n\n &:hover,\n &:focus,\n &:active {\n border-color: rgba(#fff, 0.7);\n background-color: rgba(#fff, 0.1);\n text-decoration: none;\n color: #fff;\n }\n}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.
\n\n\nLeia mais sobre bósons e quarks em nomadev
\n
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á!
\n/end
","excerpt":"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…","timeToRead":4,"frontmatter":{"category":["sass"],"date":"há 11 anos","datePublished":"2015-11-16T00:00:00.000Z","description":"SASS é um pré-processador incrível não acha? Mas muitos não sabem como organizar seus projetos com ele","path":"/sass-e-atomic-design","tags":["sass","css","pre-processador"],"title":"SASS + Atomic design","image":{"publicURL":"/static/conhecendo-o-pre-processador-sass-b6a1f24254111b01aa97dae9042b5345.jpg","name":"conhecendo-o-pre-processador-sass"}},"fields":{"readingTime":{"words":605}}}},"pageContext":{}}}