Galera, me tirem uma dúvida. O SASS é muito bom mesmo, foi o meu primeiro contato atráves desse curso e realmente ele é muito bom! Porém, o projeto dado não possui orientações para fazer com que o mesmo se torne responsivo para outras telas, no CSS normal utilizamos media queries, como funcionaria para por esse projeto do Calmaria SPA responsivo utilizando o SASS?
Olá, Gabriel! Fico feliz que você esteja gostando de aprender SASS, é uma ferramenta realmente poderosa!
Para tornar seu projeto responsivo usando SASS, você pode usar as media queries da mesma forma que faria com CSS normal. A diferença é que no SASS você tem a opção de aninhar as media queries dentro dos seletores, o que pode tornar seu código mais organizado.
Por exemplo, digamos que você tenha um seletor .container e queira que ele tenha uma largura de 80% na visualização de desktop e 100% na visualização de dispositivos móveis. Você poderia fazer algo assim:
.container {
width: 80%;
@media (max-width: 768px) {
width: 100%;
}
}
Neste exemplo, a regra dentro da media query (width: 100%) será aplicada quando a largura da janela do navegador for de 768px ou menos.
Lembre-se que, assim como no CSS, você pode usar diferentes tipos de media features (como min-width, max-height, orientation, etc.) e operadores lógicos (como and, not, only) nas suas media queries.
Espero ter ajudado e bons estudos!