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

[Dúvida] Utilização de MediaQuerie com Sass

Referente ao curso SASS e CSS: estilizando um site, no capítulo Estilizando com @extend e Parent Selector e atividade Reutilizando códigos com @Extend

por Kerle
| 80.4k xp | 3 posts

Olá, boa tarde

Fiz o primeiro curso do sass e agora estou fazendo esta atualização para tentar achar alguma explicação sobre o uso de @mediaqueries com o sass, mas acredito que não tenha neste curso ou ainda cheguei. Estou tentando aplicar o @media para deixar a tela responsiva e o layout funcionar em celular também. Como o sass segue um modelo estruturado, teria uma forma melhor de utilizar, sem ter que ficar repetindo código? Se alguém puder ajudar nesta dúvida, agradeço. Segue um trecho do código do CalmariaSpa:

#home {

        max-width: 1040px;
        @include mixins.margem-central(80%);
        @media (max-width: 480px) {
            display: block;
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        .textos-home {
            align-content: space-between;
            max-width: 464px;
            h1 {  
                @media (max-width: 480px) {
                    font-size: 20px;
                }
                font-size: 40px;
                color: variaveis.$cor-primaria;
                margin-bottom: 2rem;
                font-family: variaveis.$ft-titulos;
                span {
                    color: variaveis.$cor-secundaria;
                }
            }
2 respostas
solução!
por Renan Cezar Wuicik
| 2690.4k xp | 5575 posts
Instrutor Suporte Educacional Start By Alura

Olá Kerle! Tudo ok contigo?

Uma maneira eficaz de evitar repetição de código é através da criação de mixins. Mixins no SCSS são como funções que podemos usar para encapsular estilos que queremos reutilizar.

Vamos criar um mixin para a media query que você está usando frequentemente. Aqui está um exemplo de como você pode fazer isso:

@mixin respond-to($media) {
  @if $media == small {
    @media (max-width: 480px) { @content; }
  }
  // Você pode adicionar outras condições para diferentes tamanhos de tela
}

Agora, você pode usar esse mixin em seu código SCSS da seguinte maneira:

#home {
  max-width: 1040px;
  @include mixins.margem-central(80%);
  display: flex;
  align-items: center;
  justify-content: space-between;

  @include respond-to(small) {
    display: block;
  }

  .textos-home {
    align-content: space-between;
    max-width: 464px;
    h1 {  
      font-size: 40px;
      color: variaveis.$cor-primaria;
      margin-bottom: 2rem;
      font-family: variaveis.$ft-titulos;

      @include respond-to(small) {
        font-size: 20px;
      }

      span {
        color: variaveis.$cor-secundaria;
      }
    }
  }
}

Com este mixin, você pode facilmente adicionar novas media queries para diferentes tamanhos de tela e reutilizá-las em todo o seu código SCSS, evitando a repetição.

Era isso, se precisar eu estarei por aqui!

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓
por Kerle
| 80.4k xp | 3 posts

Olá Renan,

Obrigada pela ajuda. Vou aplicar as dicas por aqui.

Até mais