Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Organização com o SASS

Referente ao curso Arquitetura CSS: descomplicando os problemas, no capítulo Layout base e Estilização de cabeçalho e atividade Simplificando os seletores

por Estudante
| 251.4k xp | 19 posts

Neste ponto do curso me veio a dúvida de como fazer para organizar o estilo de um projeto feito por meio do SASS.

Seria necessário ainda criar um estilo .css para cada "atomo" da estrutura HTML? Ou isso poderia ser feito diretamente pelos arquivos .scss que posteriormente seriam compilados em um único arquivo .css importado uma única vez pelo projeto?

Creio que a primeira opção seria extremamente compliacada de executar, pois para cada arquivo .css também seria necessário criar um arquivo .scss para compilar seu estilo.

3 respostas
por Diego Maeoka
| 173.5k xp | 119 posts
Senior FrontEnd Developer

da uma olhada para ver como o SCSS do bootstrap é organizado. https://github.com/twbs/bootstrap/tree/main/scss

Cada arquivo tem uma responsabilidade, e vc no final cria um bundle inteiro. É o jeito mais fácil

Abraços

solução!
por Felipe Gouvea Alves
| 94.4k xp | 5 posts
Desenvolvedor Web Jr

Fala, Lucas! Boa noite irmão!

Então, uma vez que a gente começa usando o sass, não tem necessidade de usar outro arquivo .css.

Você pode criar um global.scss para o seu arquivo e fazer os resets de css por lá e, também para cada arquivo (que acho que é o átomo que você diz), você poderia usar o scss.

Resets de css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Espero que eu tenha conseguido responder a sua dúvida! :)

por Estudante
| 251.4k xp | 19 posts

Obrigado pelas respostas, ambas foram complementares e confirmaram minhas suspeitas sobre a arquitetura de projetos envolvendo o uso do SASS. Gostei muito do exemplo do Bootstrap e da dica do global.scss!